Lightning layout items are not horizontally aligned

Question

I am new to lightning development. I was trying to learn about <lightning:layout> and <lightning:layoutItem> and came across one issue.

I have created two lightning layout items in a lightning layout. and keep the horizontal alignment as a center with the code <lightning:layout horizontalAlign="center">

but two layout items are not horizontally aligned properly. Please refer below screenshot.

Following is the code of the component

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="buttonLabel" type="string" default="Search"/>    
    <aura:attribute name="isNewAvailable" type="boolean" default="true"/>
    
    <lightning:layout horizontalAlign="center">
        <lightning:layoutItem padding="around-medium">
            <lightning:select name="select1" label="Car Types" value="" aura:id="carType" variant="label-hidden">
                <option value="" label="All Types"/>
                <option value="" label="Luxury Cars"/>
                <option value="" label="Sports Cars"/>
            </lightning:select>
        </lightning:layoutItem>
        
        <lightning:layoutItem  padding="around-medium">
            <lightning:button variant="brand" label="{!v.buttonLabel}"/>
            <aura:if isTrue="{!v.isNewAvailable}">
                <lightning:button variant="neutral" label="New"/>
            <aura:set attribute="else">
                New button cannot be added here!!
            </aura:set>
            </aura:if>
        </lightning:layoutItem>
    </lightning:layout>
         
</aura:component>

Answer 1

This question has probably been asked many times in different forums. The hidden label in the lightning:select is creating the additional space

Include class="slds-m-top_medium" in the lightning:layoutItem for the buttons. Also, include the verticalAlign="center" in the lightning:layout.

Code should be as follows:

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="buttonLabel" type="string" default="Search"/>    
    <aura:attribute name="isNewAvailable" type="boolean" default="true"/>
    
    <lightning:layout horizontalAlign="center" verticalAlign="center">
        <lightning:layoutItem padding="around-medium">
            <lightning:select name="select1" label="Car Types" value="" aura:id="carType" variant="label-hidden">
                <option value="" label="All Types"/>
                <option value="" label="Luxury Cars"/>
                <option value="" label="Sports Cars"/>
            </lightning:select>
        </lightning:layoutItem>
        
        <lightning:layoutItem  padding="around-medium" class="slds-m-top_medium">
            <lightning:button variant="brand" label="{!v.buttonLabel}"/>
            <aura:if isTrue="{!v.isNewAvailable}">
                <lightning:button variant="neutral" label="New"/>
            <aura:set attribute="else">
                New button cannot be added here!!
            </aura:set>
            </aura:if>
        </lightning:layoutItem>
    </lightning:layout>
         
</aura:component>

Answer 2

Hi I had the same Issue working with the <lightning-layout-item>, though in LWC and not in Aura Component. As pointed out by arut's answer it is happening because of the space occupied by label attribute.

I have tested in LWC that if you pass an attribute variant="label-hidden" in the component occupied by lightning layout which is lightning:select in your case than that space will vanish and it will align with the buttons.

Here's my example for people looking for the similar problem in LWC:

<lightning-layout horizontal-align="space">
    <lightning-layout-item size="3" padding="around-small">
        <lightning-input onchange={doSearchTermChange} value={searchTerm}
          placeholder="Search something" variant="label-hidden"
          type="search">
        </lightning-input>
    </lightning-layout-item>
    <lightning-layout-item size="3" padding="around-small">
        <lightning-combobox
          name="Views"
          value={selectedListView}
          placeholder="Select a View"
          options={listViews}
          variant="label-hidden"
          disabled={shalldisableListView}
          onchange={handleViewChange}>
        </lightning-combobox>
</lightning-layout-item>

So, I have added attribute variant="label-hidden" in both the components inside the lightning layout-item i.e., lightning-input and lightning-combobox.