title: Using input-group inside an inline form
body: <p>When appending an <code>input-group</code> to a <code>form-inline</code>, the <code>input-group</code> appears below the form on a "new line" instead of inline with the other controls. </p>
  
  <p>It seems that this is because the <code>input-group</code> wrapper class has <code>display</code> set to <code>table</code> whereas the other inputs, which work fine, have their <code>display</code> set to <code>inline-block</code>. Of course, it is not possible to give the <code>input-group</code> the <code>inline-block</code> display because its child <code>add-on</code> span, which has <code>display: table-cell</code>, needs the property of the parent to align correctly.</p>
  
  <p><strong>So my question is:</strong> is it possible to use <code>input-group</code> inside an inline form <em>using Bootstrap classes exclusively</em>? If not, what would be the best work-around <em>allowing the use of custom classes</em>.</p>
  
  <p>Here is a <a href="http://jsfiddle.net/26ZM4/2/">demo</a> illustrating my point. The code is the following:</p>
  
  <pre><code>&lt;form action="" class="form-inline"&gt;
      &lt;input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/&gt;
      &lt;input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/&gt;
  
      &lt;div class="checkbox"&gt;
          &lt;label&gt;
              &lt;input type="checkbox" /&gt; and Checkboxes
          &lt;/label&gt;
      &lt;/div&gt;
      &lt;select class="form-control" style="width: 150px;"&gt;
          &lt;option&gt;and Selects&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;button type="submit" class="btn btn-default"&gt;and Buttons&lt;/button&gt;
      &lt;div class="input-group" style="width: 220px;"&gt;
          &lt;span class="input-group-addon"&gt;BUT&lt;/span&gt;
          &lt;input type="text" class="form-control" placeholder="not with input-groups" /&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>