[SalesForce] lightning:layout horizontalAlign left and right

I want to make some part of components to left and some part to right.

In the below markup, I want to make first lightning:layoutItem to align left and rest of it to align to right. How can I achieve it?

<lightning:layout horizontalAlign="left" verticalAlign="end">
        <lightning:layoutItem class="slds-p-around_xxx-small">
            <lightning:select aura:id="pageSize" label="Records per page:" onchange="{!c.onPageSizeChange}">
                <option value="10" selected="true">10</option>
                <option value="30">30</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="150">150</option>
                <option value="200">200</option>
            </lightning:select>
        </lightning:layoutItem>
        <!-- I want to make right alignment from here-->
        <lightning:layoutItem class="slds-p-around_xxx-small">
            <lightning:select aura:id="searchBy" label="Search By">
                <option value="-1" selected="true">--None--</option>
                <option value="Name">Credit Customer</option>
                <option value="Return_Type__c">Return Type</option>
                <option value="Cycle__c">Cycle</option>
                <option value="Return_Authorization__c">Return Auth</option>
                <option value="Status__c">Status</option>
            </lightning:select>
        </lightning:layoutItem>
        <lightning:layoutItem class="slds-p-around_xxx-small">
            <lightning:input aura:id="txtSearchBy" label='' name="txtSearchBy" placeholder="Enter search text here"/> 
        </lightning:layoutItem>
        <lightning:layoutItem class="slds-p-around_xxx-small">
            <lightning:buttonIcon iconName="utility:search" variant="brand" title="Search"/>
        </lightning:layoutItem>
        <lightning:layoutItem class="slds-p-around_xxx-small">
            <lightning:buttonIcon iconName="utility:refresh" variant="brand" title="Reset Search"/>
        </lightning:layoutItem>
        <!-- End of right align -->
</lightning:layout>

Alignment

I need the output to be (my desired output):

enter image description here

Update:

As per suggestion, I did below.

<lightning:layout verticalAlign="end">
        <lightning:layoutItem class="left-align" size="2">
            <lightning:select aura:id="pageSize1" label="Records per page:" onchange="{!c.onPageSizeChange}">
                <option value="10" selected="true">10</option>
                <option value="30">30</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="150">150</option>
                <option value="200">200</option>
            </lightning:select>
        </lightning:layoutItem>
        <lightning:layoutItem class="right-align" size="2">
            <lightning:select aura:id="searchBy" label="Search By">
                <option value="-1" selected="true">--None--</option>
                <option value="Name">Credit Customer</option>
                <option value="Return_Type__c">Return Type</option>
                <option value="Cycle__c">Cycle</option>
                <option value="Return_Authorization__c">Return Auth</option>
                <option value="Status__c">Status</option>
            </lightning:select>
        </lightning:layoutItem>
        <lightning:layoutItem class="right-align" size="7">
            <lightning:input aura:id="txtSearchBy" label='' name="txtSearchBy" placeholder="Enter search text here"/> 
        </lightning:layoutItem>
        <lightning:layoutItem class="slds-p-around_xxx-small right-align">
            <lightning:buttonIcon iconName="utility:search" variant="brand" title="Search"/>
        </lightning:layoutItem>
        <lightning:layoutItem class="slds-p-around_xxx-small right-align">
            <lightning:buttonIcon iconName="utility:refresh" variant="brand" title="Reset Search"/>
        </lightning:layoutItem>
</lightning:layout>

Output:

enter image description here

Best Answer

horizontalAlign is used to position the grid elements within the grid, not for aligning content, which I suspect is your intent.

If you want to align the individual child elements, use normal CSS for that:

<aura:component>
    <lightning:layout>
        <lightning:layoutItem size="8" class="left-align">
            ... Left Content ...
        </lightning:layoutItem>
        <lightning:layoutItem size="4" class="right-align">
            ... Right Content ...
        </lightning:layoutItem>
    </lightning:layout> 
</aura:component>

.THIS .left-align {
    text-align: left;
}
.THIS .right-align {
    text-align: right;
}
Related Topic