title: Multiple textboxes in a single row in Bootstrap
body: <p>I'm using Bootstrap to try and place 2 textboxes next to a label, all on a single row, however, I can't seem to get everything to line up properly.</p>
  
  <p><img src="https://i.stack.imgur.com/b4bvj.png" alt="Diagram 1"></p>
  
  <p>I'm working on trying to get the "Domestic" row working first. The other rows look exactly how I want them to look, but that's only because I cheated and added a style of "width: 49%" to them. Doing this, however, breaks the fully responsive nature of the textboxes, which I want to keep.</p>
  
  <p>You'll notice that for the "Domestic" row, that the label doesn't line up with the rows below it, and neither do either of the textboxes. This is my code for the "Domestic" row - </p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;div class="form-horizontal"&gt;
      &lt;div class="form-group col-md-12 col-xs-12"&gt;
          &lt;div class="col-md-4 col-xs-12"&gt;
              &lt;label class="control-label"&gt;Domestic&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4 col-xs-12"&gt;
              &lt;input id="percentage" class="form-control" type="text" placeholder="Percentage"&gt;
              &lt;span class="input-group-addon"&gt;
                  &lt;i class="glyphicon glyphicon-remove-circle"&gt;&lt;/i&gt;
              &lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4 col-xs-12"&gt;
              &lt;input id="flat" class="form-control" type="text" placeholder="Flat (eg. 0.33)"&gt;
              &lt;span class="input-group-addon"&gt;
                  &lt;i class="glyphicon glyphicon-remove-circle"&gt;&lt;/i&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Things go even more pear shaped when I run validation on the form and start displaying those input-group-addons - </p>
  
  <p><img src="https://i.stack.imgur.com/KF9zW.png" alt="Diagram 2"></p>
  
  <p>All I'm essentially trying to do is split the row into thirds, 1 third for the label, 1 third for the first textbox and 1 third for the second textbox (and then, if that works, hopefully I can get it working for 1 row per control on xs displays).</p>
  
  <p>Any ideas?</p>
  
  <p>Edit: As requested, here is my code for the "Amex" row - </p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;div class="form-group col-md-12 col-xs-12"&gt;
      &lt;label class="col-md-4 col-xs-12 control-label"&gt;Amex&lt;/label&gt;
      &lt;div class="input-group col-md-8 col-xs-12 form-inline"&gt;
          &lt;div class="input-group" style="width: 49%;"&gt;
              &lt;input id="amexPercentage" class="form-control" type="text" placeholder="Percentage"&gt;
              &lt;span class="input-group-addon"&gt;
                  &lt;i class="glyphicon glyphicon-remove-circle"&gt;&lt;/i&gt;
              &lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="input-group" style="width: 49%;"&gt;
              &lt;input id="amexFlat" class="form-control" type="text" placeholder="Flat (eg. 0.33)"&gt;
              &lt;span class="input-group-addon"&gt;
                  &lt;i class="glyphicon glyphicon-remove-circle"&gt;&lt;/i&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>