The bottom section for this page looks simple, but we need to think very carefully about the way it's set up. On small screens, all of the elements should be displayed in a single column. Larger screens have two columns. The simplest way to do this is to wrap both of these sections in a container view as shown in the following figure:
The biggest challenge is to figure out how to make sure that the container view we created earlier is able to calculate the height. Previously, we added a constraint that pinned the bottom of the contact name label to the bottom of the content view. Now, we'll add this constraint to the left view since it's the tallest view we're adding to the details page.
Drag two UIViews into the content view. It will be easier to work with the views if you have some more room. In the Document Outline, find the constraint that looks like bottom = Label.bottom. This constraint currently pins the label's bottom edge to the content view's bottom edge. Select it and delete it by pressing the Delete key or Command + Backspace. This will give you some more place to work with your views.
Now, size the two UIViews so they meet approximately in the middle. They shouldn't overlap but there should be no horizontal space between them. Drag the left edge of the left view to the left side of the content view until you see the blue helper lines. Then, do the same for the right side. Position them both so they are ±40 points beneath the contact name label.
Select the left view, press Ctrl, and drag it to the contact name label to add a vertical spacing constraint. Then, drag it to the left side to pin this view's left side to the content view's leading edge. Now, select the right view and do the same, except instead of dragging left, drag right to pin the right side to the content view's trailing edge. Finally, Ctrl + drag from the left view to the right view and select the equal width constraint and vertical spacing constraint. This should leave you with two equally sized views that don't have a height yet.
Drag six UILabels into the left view. Align them as they are in the design. Use the blue lines as guides for the margins, and make the labels wide enough to cover the view. Stop at the blue lines again; they help you by providing some natural margins. Press Ctrl and drag the first label upward to pin it to the top side of the view. Press Ctrl and drag left to pin it to the left side, and press Ctrl and drag right to pin it to the right side. Then, select the second label and drag it toward the first label. While holding the Shift key, select the leading, trailing, and vertical spacing constraints. Repeat this for all other labels. The final label should be pinned to the bottom of the view.
Now, drag a label and the text field to the right side's view. Align the elements by using the blue lines again. Pin the label to the top, right, and left sides of its containing view. Drag the text field to the label and select the leading, trailing, and vertical spacing constraints. Finally, drag upward inside the text field to add a height constraint. Modify this constraint so the text field has a height of 80. Finally, press Ctrl and drag downward to pin the bottom of the text field to the bottom of the view.
The final layout step is to press Ctrl and drag the left view down into the content view. Select the vertical spacing constraint and modify the constant so the final spacing is eight. Now use the Attributes Inspector to make the header labels bold font and provide the appropriate text values for them.
Well, that was a lot of instructions, but you should have successfully completed the layout for Regular x Regular devices. Try to run your app on an iPad; looks pretty good, right?