title: Designing a select drop-down
body: <p>this is a very simple issue, to which I can't find a solution. I've created a select drop-down. But, it appears like two controls. like:</p>
  
  <pre><code>               -----------------
               |     ----------     |  ------------
                    |    Tax    |                  |
               |     ----------     |  ------------
                  -----------------
  </code></pre>
  
  <p>But my requirement is, it should be something like this:</p>
  
  <pre><code>                ---------- ----------
                 |   Tax    |          |
                  ---------- ---------- 
  </code></pre>
  
  <p>First one is a select button and the second is an empty textbox.</p>
  
  <p>This is how I tried:</p>
  
  <pre><code>&lt;div class="row"&gt;
                      &lt;div class="col-sm-6"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label class="col-sm-6"&gt;Tax Value&lt;/label&gt;
                              &lt;div class="col-sm-6"&gt;
                                  &lt;div class="input-group"&gt;
                                      &lt;div class="input-group-btn"&gt;
                                          &lt;select type="button" class="btn btn-default dropdown-toggle align-right" id="tax_toggle" name="tax_toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;Tax &lt;span class="caret"&gt;&lt;/span&gt;&lt;/select&gt;
                                      &lt;/div&gt;
                                      &lt;input type="text" id="invoice_request_tax_value" name="invoice_request_tax_value" class="form-control" placeholder="Tax Value" required="required" readonly="readonly"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>I don't know what's wrong. Can someone help me to fix this?</p>