Allign button at the same level of input field

Question

I want to allign create button at the same level of input field i.e exact right side of the input field, in the same line.

In the below code, it is coming at below level of the field

<div class="slds-grid slds-grid--wrap">
<div class="slds-size--1-of-12"></div>
<div class="slds-size--10-of-12 slds-container--medium slds-container--left">
    <br></br>
    <div class="slds-form--horizontal">
        <div class="slds-form-element">
            <label class="slds-form-element__label">Enter Expense Value</label>
            <div class="slds-form-element__control">
                <ui:inputNumber class="slds-input"/>
            </div>
        </div> 
         <lightning:button class="slds-button slds-button--neutral slds-input__icon--right" label="Create" onClick="{!c.createExpense}"/>                 
    </div> 
</div>     
<div class="slds-size--1-of-12"></div>
    </div>

Answer 1

Why not use lightning:layout like so:

<lightning:layout multipleRows="true" verticalAlign="end">
        <lightning:layoutItem size="12" smallDeviceSize="12" mediumDeviceSize="1" largeDeviceSize="1" padding="around-small"/>
        <lightning:layoutItem size="12" smallDeviceSize="10" mediumDeviceSize="8" largeDeviceSize="8" padding="around-small">
            <div class="slds-form-element">
                    <label class="slds-form-element__label">Enter Expense Value</label>
                    <div class="slds-form-element__control">
                        <ui:inputNumber class="slds-input"/>
                    </div>
                </div> 
        </lightning:layoutItem>
        <lightning:layoutItem size="12" smallDeviceSize="2" mediumDeviceSize="2" largeDeviceSize="2" padding="around-small">
            <lightning:button class="slds-button slds-button--neutral slds-input__icon--right" label="Create" onClick="{!c.createExpense}"/> 
        </lightning:layoutItem>
        <lightning:layoutItem size="12" smallDeviceSize="12" mediumDeviceSize="1" largeDeviceSize="1" padding="around-small"/>
    </lightning:layout>

Pay attention to verticalAlign="end" which pushes the button to the bottom and aligns with the input box, otherwise it will try to align with your label.

But, if you want to stick to your original design, here a way to do it:

<div class="slds-grid slds-grid--wrap">
        <div class="slds-size_1-of-12"></div>
        <div class="slds-size_10-of-12">
            <fieldset class="slds-form-element slds-form_compound">
                <div class="slds-form-element__control">
                    <div class="slds-form-element__group">
                        <div class="slds-form-element__row">
                            <div class="slds-form-element slds-size_1-of-2">
                                <label class="slds-form-element__label">Enter Expense Value</label>
                                <div class="slds-form-element__control">
                                    <ui:inputNumber class="slds-input"/>
                                </div>
                            </div>
                            <div class="slds-form-element slds-size_1-of-2">
                                <lightning:button class="slds-button slds-button--neutral slds-input__icon--right" label="Create" onClick="{!c.createExpense}"/> 
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>   
        </div>
        <div class="slds-size_1-of-12"></div>
    </div>

You can refer to this for further clues.

Answer 2

Try wrapping both lines in a span tag

<div class="slds-grid slds-grid--wrap">
<div class="slds-size--1-of-12"></div>
<div class="slds-size--10-of-12 slds-container--medium slds-container--left">
    <br></br>
    <div class="slds-form--horizontal">
<span>
        <div class="slds-form-element">
            <label class="slds-form-element__label">Enter Expense Value</label>
            <div class="slds-form-element__control">
                <ui:inputNumber class="slds-input"/>
            </div>
        </div> 
</span>
<span>
         <lightning:button class="slds-button slds-button--neutral slds-input__icon--right" label="Create" onClick="{!c.createExpense}"/>
</span>


    </div> 
</div>     
<div class="slds-size--1-of-12"></div>
    </div>

if that doesnt work try using slds-grid and slds-col like the example below

div class="slds-grid slds-gutters">
  <div class="slds-col">
    <div>enter-expense</div>
  </div>
  <div class="slds-col">
    <lightning:button>2</lightning:button>
  </div>
</div>