[SalesForce] How to set the width of a lightning:input type=”search” without using pixels

so I need to use a lightning:input type="search" searchbar, and I also need to put a button to the right of the searchbar on the same line. e.g.: searchbar image with button to the right

the issue is, the only way I could figure out to get the searchbar not to span the whole width of the screen was by setting the width of the containing 'span' in pixels:

<span id="{!GlobalId + '_search'}" onkeyup="{!c.onKeyup}" style="{!'width:'+v.width+';'}">
        <form style="{!'width:'+v.width+';'}" id="{!GlobalId + '_width'}">
            <lightning:input type="search" label="{!v.label}" name="{!v.name}" aura:id="bar" placeholder="{!v.placeHolder}"/>
        </form>
    </span>

The searchbar stays the same width when the user resizes the screen or when the scroll bar appears, and the view gets all messed up. I tried resetting the width dynamically with v.width, a window resize event listener, and a function to determine if the scrollbar is present, but it doesn't seem to be working right (and there's got to be a better way than that). My first instinct was to use percents, but those don't work either.

Anyone know how to do this right?

EDIT: some test code I'm using:

<aura:component >

<div class="slds-float_right">
    <br/>
    <ui:button label="All" class="slds-button_neutral"/>
</div>

<div class="slds-form--stacked">
    <lightning:input type="search" name="label" label="Label" placeholder="placeholder"/>
</div>

Best Answer

Assuming you're using a form, you just need to make sure you've got the right CSS styles:

<div class="slds-form--stacked">
  <lightning:input ...
</div>

If you do this, your form element should be reactive. You should be using SLDS, because the <lightning: elements are meant to be used in an SLDS context.

If you're using a grid, specify a size:

<lightning:input class="slds-size--1-of-1" ...