How to Align Lightning Component Label and Fields

Question

How to align lightning label and lightning input in 1 row? I can't seem to putll it off. Here's my current form. However, my goal is to make it look like this This is my lightning form code for the first image above:

<div class="slds-grid">
<div class="slds-col slds-size_1-of-2">
    <lightning:input aura:id="contactField" type="text" value="{!v.newContact.LastName}" Name="Last Name" label ="Last Name"/>
</div>
<div class="slds-col slds-size_1-of-2">
    <lightning:input aura:id="contactField" type="text" value="{!v.newContact.FirstName}" Name="First Name" label ="First Name"/>
</div>
<br/>
<div class="slds-col slds-size_1-of-2">
    <lightning:input aura:id="contactField" type="email" name="email" label="Email"  value="{!v.newContact.Email}" />
</div>

I'm trying to make it look like the second picture. However, for the second picture, I used the label tag which is separate from the input tag. It's never hard to make the input field and the label appear in 1 line where the input box has similar alignment with the input box below it. But using the lightning:input with the label together in it, would it be possible to align them in 1 row?

Answer 1

Yes, simply place your elements in a horizontal form, and give the elements the correct size. Here's a modified example of your code:

<div class="slds-form_horizontal slds-form slds-grid slds-wrap">
    <lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="{!v.newContact.LastName}" Name="Last Name" label ="Last Name"/>
    <lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="{!v.newContact.FirstName}" Name="First Name" label ="First Name"/>
    <lightning:input aura:id="contactField" class="slds-size_1-of-2" type="email" name="email" label="Email"  value="{!v.newContact.Email}" />
</div>

Answer 2

  <lightning:input value="{!v.searchKeyword}"
                                 required="true"
                                 aura:id="searchField"
                                 label="Search label"
                                 variant="label-inline" />