Semantic UI inline button

Question

I have a text input with a label and beside it I'm placing a button to do something other than submit the form in which the input and button reside. I'm placing the input (with label) in a twelve wide field and the button is within a four wide field:

<div class="two fields">
    <div class="twelve wide field">
        <label for="postalCodeMain">Postcode</label>
        <input type="text" id="postalCodeMain" value=""/>
    </div>
    <div class="four wide field">
        <div class="ui fluid bottom button" onclick="getLocations('Main');">Search for Address</div>
    </div>
</div>

The thing is that the button floats to the top of the four wide field as there is label above the input, what would be the best way to get the button to be inline with the input?

I've tried a number of methods but putting the label outside of the fields leads to an excessive gap between the label and the input and adding an empty label atop the button strikes me as being wasteful...?

Here are the methods I've tried on JSFiddle.

Am I missing a class for the button div?

Answer 1

Well colour me stupid, after reading the documentation some more I clocked that this is dead easy:

    <div class="field">
        <label for="postalCode05">Postcode</label>
        <div class="ui action input">
            <input type="text" id="postalCode05" placeholder=""/>
            <button class="ui button">Search</button>
        </div>
    </div>

Example in my updated JSFiddle