Lightning Aura components not showing complete layout

Question

I'm learning aura framework but I am facing an issue. I'm actually using nested layout with 4 fields but somehow it's only showing me top 2 fields. Can anyone please help me to show all those 4 fields?

Here is my code. As you can see there is a comment row 2 below that comment two fields are there that is not visible on my page.

Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">

    <div class="c-container">
        <lightning:layout multipleRows="true">
            <lightning:layoutItem padding="around-small" size="12">
                <div class="page-section page-header">
                    <h2>General Information</h2>
                </div>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small" size="12">
                <div class="page-main">
                    <lightning:layout>
                        <lightning:layoutItem padding="around-small" size="6">
                            <div class="slds-p-around_medium lgc-bg">
                                <lightning:input name="firstName" label="First Name" />
                            </div>
                        </lightning:layoutItem>
                        <lightning:layoutItem padding="around-small" size="6">
                            <div class="slds-p-around_medium lgc-bg">
                                <lightning:input name="lastName" label="Last Name" required="true" />
                            </div>
                        </lightning:layoutItem>


                            <!-- This row 2 is not visible -->
        
                            <lightning:layoutItem padding="around-small" size="6">
                                <div class="slds-p-around_medium lgc-bg">
                                    <lightning:input type="email" name="email1" value="abc@domain.com" label="Email" required="true" />
                                </div>
                            </lightning:layoutItem> 
                            <lightning:layoutItem padding="around-small" size="6">
                                <div class="slds-p-around_medium lgc-bg">
                                    <lightning:input type="tel" label="Phone" name="phone" required="true" />
                                </div>
                            </lightning:layoutItem>     
                    </lightning:layout>
                </div>
            </lightning:layoutItem>

            <lightning:layoutItem flexibility="auto" padding="around-small" size="12">
                <div class="page-footer page-section">
                    <h2>Footer</h2>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
    </div>

</aura:component>

CSS

.THIS.c-container {
    border: 1px solid #d8dde6;
    margin: 10px 0 20px 0;
}
.THIS .page-section {
    border: solid 1px #ccc;
    padding: 1rem;
}
.THIS .page-header,
.THIS .page-footer {
    height: 50px;
}
.THIS .page-main {
    background: #f8f8f8;
}
.THIS .page-left,
.THIS .page-right {
    background: #f0efef;
}

Answer 1

I have seen your code. All four fields are there on the page: If you move your page from left to right, you can see your other two fields as well.

Scenario 1: As you see, if you want to display two fields in one row and the other two fields in another row. For this, you need to change one line in your code: multipleRows="true; adding this to your layout will solve your problem.

Example:

<lightning:layout multipleRows="true"> 
     <lightning:layoutItem size="6"> </lightning:layoutItem>
     <lightning:layoutItem size="6"> </lightning:layoutItem>
     <lightning:layoutItem size="6"> </lightning:layoutItem>
     <lightning:layoutItem size="6"> </lightning:layoutItem>
</lightning:layout>

Scenario 2: As you see, if you want all four fields in one row, you need to change the size.

Example:

<lightning:layout>
     <lightning:layoutItem size="3"> </lightning:layoutItem>
     <lightning:layoutItem size="3"> </lightning:layoutItem>
     <lightning:layoutItem size="3"> </lightning:layoutItem>
     <lightning:layoutItem size="3"> </lightning:layoutItem>
</lightning:layout> 

Answer 2

We refer to the size in lightning:layoutItem as per the grid. You can have up to 12 columns in your grid, so we choose the size accordingly. Please replace this code with your code-

<lightning:layout>
                    <lightning:layoutItem padding="around-small" size="3">
                        <div class="slds-p-around_medium lgc-bg">
                            <lightning:input name="firstName" label="First Name" />
                        </div>
                    </lightning:layoutItem>
                    <lightning:layoutItem padding="around-small" size="3">
                        <div class="slds-p-around_medium lgc-bg">
                            <lightning:input name="lastName" label="Last Name" required="true" />
                        </div>
                    </lightning:layoutItem>


                        <!-- This row 2 is not visible -->
    
                        <lightning:layoutItem padding="around-small" size="3">
                            <div class="slds-p-around_medium lgc-bg">
                                <lightning:input type="email" name="email1" value="abc@domain.com" label="Email" required="true" />
                            </div>
                        </lightning:layoutItem> 
                        <lightning:layoutItem padding="around-small" size="3">
                            <div class="slds-p-around_medium lgc-bg">
                                <lightning:input type="tel" label="Phone" name="phone" required="true" />
                            </div>
                        </lightning:layoutItem>     
                </lightning:layout>

Please visit the link below to know more about Grid in Aura.

https://www.lightningdesignsystem.com/utilities/grid/

Thanks