Align button with input forms with labels
<p>I'm trying to align a button element with two other input elements with labels. Using the bootstrap snippet below:</p>

<pre><code>&lt;div class="row centered-form center-block "&gt;
  &lt;div class="container col-md-6 col-md-offset-3"&gt;
    &lt;form action="/result" class="form-inline" method="get" role="form"&gt;
      &lt;div class="row"&gt;
         &lt;div class="form-group col-md-6"&gt;
           &lt;label class="control-label" for="County"&gt;Prop1, Prop2&lt;/label&gt;
           &lt;input class="form-control" name="County"  type="text" /&gt;
         &lt;/div&gt;
         &lt;div class="form-group col-md-4"&gt;
           &lt;label class="control-label" for="Type"&gt;Type of Election&lt;/label&gt;
             &lt;select class="form-control" name="Type"&gt;&lt;option value=""&gt;&lt;/option&gt;
                &lt;option value="1"&gt;President&lt;/option&gt;
             &lt;/select&gt;
         &lt;/div&gt;
        &lt;button class="btn btn-primary col-md-2" type="submit"&gt;Submit&lt;/button&gt;
     &lt;/div&gt;
   &lt;/form&gt;    
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The image I'm getting looks like this:</p>

<p><a href="https://i.stack.imgur.com/eqplM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/eqplM.png" alt="enter image description here"></a></p>

<p>If I remove labels from the two from inputs, I get:</p>

<p><a href="https://i.stack.imgur.com/8qtD6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8qtD6.png" alt="enter image description here"></a></p>

<p>How can I leave labels on the form inputs and still align them with the button?</p>

<p><a href="https://jsfiddle.net/zeLhxrja/" rel="noreferrer">JSFiddle</a></p>