<lightning:input variant="label-hidden"> input does not take whole parent width

Question

when I use :

<aura:application extends="force:slds" >
    <div>
        <lightning:input type="text" label="myLabel" name="withLabel" value="withLabel" />
    </div>
</aura:application>

The input element takes the whole width of the parent element (and that's excellent):

But when I use the label-hidden option:

<aura:application extends="force:slds" >
    <div>
        <lightning:input type="text" variant="label-hidden" label="noLabel" name="noLabel" value="noLabel" />
    </div>
</aura:application>

The input element takes only part of the parent element (and that is my problem):

I tried to play with css to fix that, but I couldn't find the right solution.

QUESTIONS

1. Why is the component not taking 100% width when the label is hidden?
2. Is there a better way to define the lightning:input component so this behavior will be fixed?
3. If not - I need a good css solution to this problem.

UPDATE - added css rules that did not work

.THIS .lightningInput {
    display: flex;
}

Answer 1

1- the SLDS styling changes the form element scoping when using the variant label-hidden.

2.- you can specify the width of your element in your styling yourself.

3.- you can add a class to your lightning:input component, and use child selector in order to expand the input element to 100% width:

component.cmp

<lightning:input class="child"..../>

component.css

.THIS .child>.slds-form-element__control {
    width:100%;
}

Answer 2

If you want to remove the label completely, you can put the display to none for that label by accessing .slds-form-element__label class.

App Markup

<aura:application extends="force:slds" >
    <div>
        <lightning:input type="text" label="MyLabel1" name="withoutLabel" value="withoutLabel" class="nolabel" />
        <lightning:input type="text" label="MyLabel2" name="withLabel" value="withLabel" />
    </div>
</aura:application>

CSS

.THIS .nolabel .slds-form-element__label{
    display: none; 
    visibility: hidden;
}

Screenshot

Note: This is not recommended as you are using the framework level CSS and likely to be fragile.