title: Bootstrap 3 Select drop down mis-alignment
body: <p>I am trying to use an input text box along with a selection box of custom height and width, but I couldn't align them properly:</p>
  
  <pre><code>&lt;form class="form-inline" role="form"&gt;
  &lt;div class="form-group"&gt;
      &lt;input class="form-control" style="width: 600px; height: 30px" /&gt;
      &lt;select class="form-control"&gt;
          //options here
      &lt;/select&gt;
      &lt;button type="submit" class="btn btn-default" id="&lt;portlet:namespace/&gt;productSearchBtn"&gt;Search&lt;/button&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and the output looks something like this
  <img src="https://i.stack.imgur.com/RO3hc.png" alt="enter image description here"></p>
  
  <p>then I set a custom width for Select button [width: 300px],
  <img src="https://i.stack.imgur.com/ySUO1.png" alt=""></p>
  
  <p>It seems like the input text box, select drop down and submit button are misaligned.</p>
  
  <p>Please...how can I fix them so both are aligned properly?</p>