How to fix lightning:input from overlapping with element next to it when editing?

Question

Here is the reproducible version of the problem I am facing:

ExampleComponent.cmp

<aura:component>
    <ltng:require styles="/resource/SLDS212/assets/styles/salesforce-lightning-design-system-ltng.css"/>

    <div class="MyCompany">

        <form class="slds-form--inline">

            <div class="slds-form-element">
                <label  class="slds-form-element__label" 
                        for="field-one">Field One</label>
                <div class="slds-form-element__control">
                    <input  id="field-one" 
                            class="slds-input" 
                            type="number" 
                            value="1"/>
                </div>
            </div>

            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <lightning:input    type="number" 
                                        name="Field-two" 
                                        label="Field Two" 
                                        value="2">
                    </lightning:input>
                </div>
            </div>

            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <lightning:input    type="number" 
                                        name="Field-three" 
                                        label="Field Three" 
                                        value="3">
                    </lightning:input>
                </div>
            </div>                  
        </form>
    </div>
</aura:component>

On page load:

when user changing value in Field two:

when user changing value in Field one:

How to get Field two behavior same as Field one without changing lightning:input to input

NOTE: Please note that this may look like plain styling issue and candidate for stackoverflow but I strongly feel it has something to do with lightning/slds :)

Answer 1

A possible solution would be to use SLDS styling:

<aura:component>
    <div class="slds-grid">             
        <div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3 ">
            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <lightning:input type="number" label="Field One" value="1" />
                </div>
            </div>
        </div>

        <div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3">
            <div class="slds-form-element">
                <div class="slds-form-element__control">
                   <lightning:input type="number" label="Field Two" value="2" />
                </div>
            </div>
        </div>

        <div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3">
            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <lightning:input type="number" label="Field Three" value="3" />
                </div>
            </div>
        </div>
    </div>
</aura:component>

Output:

Styling used:

• slds-grid: used to have all 3 boxes on the same line. If removed, each lightning:input will be on a separate line, as shown in photo below:

• slds-col--padded: used to add a space between the components(input boxes)
• slds-size--1-of-1: size of the input boxes
• slds-medium-size--1-of-3: used to display three elements on a line

You may check out SLDS Sizing for the last two points.

Note: I have changed the first <input> to a <lightning:input>. You may play around with it.