function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Laurie DrewLaurie Drew 

Lightning Components Basics: How do I get my fields to be top justified instead of bottom?

I have build a form with two columns of fields and 4 of them are bottom justified, is there a way to get them to align by the top of the field, here is a screenshot of what I am referring to:

User-added image

Here is my code:

<lightning:layout pullToBoundary="medium">
        <lightning:layoutItem size="10" smallDeviceSize="5" mediumDeviceSize="5"  padding="around-small">
            <c:customLookup objectAPIName="account" IconName="standard:account" label="Tenant" selectedRecord="{!v.selectedTenantRecord}"/>
        </lightning:layoutItem>
        <lightning:layoutItem size="10" smallDeviceSize="5" mediumDeviceSize="5"  padding="around-small">
            <ui:inputDate aura:id="LeaseEffectiveDate" label="Lease Effective Date" class="field" value="{!v.PropDetails.LeaseEffectiveDate__c}" displayDatePicker="true" />      
        </lightning:layoutItem>
    </lightning:layout>
        
    <lightning:layout pullToBoundary="medium">
        <lightning:layoutItem size="10" smallDeviceSize="5" mediumDeviceSize="5"  padding="around-small">
            <!--<lightning:input label="Lease Opportunity" name="LeaseOpportunity" value="{!v.PropDetails.LeaseOpportunity__c }" /> -->
            <c:customLookup objectAPIName="opportunity" IconName="standard:opportunity" label="Lease Opportunity" selectedRecord="{!v.selectedOpptyRecord}"/>
        </lightning:layoutItem>
        <lightning:layoutItem size="10" smallDeviceSize="5" mediumDeviceSize="5"  padding="around-small">
            <ui:inputDate aura:id="LeaseExpirationDate" label="Lease Expiration Date" class="field" value="{!v.PropDetails.LeaseExpirationDate__c }" displayDatePicker="true" />      
        </lightning:layoutItem>
    </lightning:layout>    
        
    </div> 

Any help that can be provided would be greatly appreciated!
Best Answer chosen by Laurie Drew
Alok Singh 140Alok Singh 140
<div class="slds-grid slds-gutters">
    <div class="slds-col slds-size_1-of-2">
             put right side of fields here
    </div>

    <div class="slds-col slds-size_1-of-2">
            put left side of fields here
     </div>
</div>

All Answers

Alok Singh 140Alok Singh 140
<div class="slds-grid slds-gutters">
    <div class="slds-col slds-size_1-of-2">
             put right side of fields here
    </div>

    <div class="slds-col slds-size_1-of-2">
            put left side of fields here
     </div>
</div>
This was selected as the best answer
Alok Singh 140Alok Singh 140
Just align your filds using lightning grid system
If you need further help let me know.