title: twitter bootstrap 3 input-group-addon with btn-group not the same size
body: <p>I have to make an input-group-btn in twitter bootstrap with a dropdown-menu attached to it but the output image below shows that the btn-group is not of the same size with the input group.</p>
  
  <p><img src="https://i.stack.imgur.com/FRGLM.png" alt="enter image description here"></p>
  
  <p>Here is the html code: </p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;div class="col-md-2"&gt;&lt;button type="button" class="btn btn-primary" onclick="showModalAddStation();"&gt;Add Station&lt;/button&gt;&lt;/div&gt;
  &lt;div class="col-md-4"&gt;
       &lt;div class="form-group"&gt;
          &lt;div class="input-group"&gt;
          &lt;div class="input-group-btn" &gt;
              &lt;div class="btn-group"&gt; 
                  &lt;button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"&gt;
                      &lt;span data-bind="label" id="searchLabel"&gt;Search By&lt;/span&gt; &lt;span class="caret"&gt;&lt;/span&gt;
                  &lt;/button&gt; 
                  &lt;ul class="dropdown-menu" role="menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;  
          &lt;input type="search" name="searchBy" id="searchBy" class="form-control" /&gt;
          &lt;span class="input-group-btn"&gt;
              &lt;button id="filter" class="btn  btn-primary btn-block glyphicon glyphicon-plus" onclick="searchStationTable();"&gt;&lt;/button&gt;
          &lt;/span&gt;
          &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>