title: How can I use .input-append with a .form-inline?
body: <p>I am new to Twitter Bootstrap and am starting to fumble my way through its use. While certain aspects of the framework are starting to make sense I am still struggling with form styling. I am trying to setup several different sections of a form which will have elements that are styled utilizing <code>.form-inline</code>. In one such instance I am also attempting to use <code>.input-append</code> with little luck.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="row"&gt;
      &lt;div class="well span12"&gt;
          &lt;div class="row"&gt;
              &lt;div class="span12 form-inline input-append"&gt;
                  &lt;label for="assetSearch"&gt;Asset Search&lt;/label&gt;
                  &lt;input type="search" id="assetSearch" placeholder=""&gt;
                  &lt;span class="add-on"&gt;&lt;i class="icon-search"&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="span12 form-inline"&gt;
                  &lt;label for="service"&gt;Service&lt;/label&gt;
                  &lt;input type="text" id="service" autocomplete="off" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The above markup renders like this:</p>
  
  <p><img src="https://i.stack.imgur.com/DvzWT.png" alt="screenshot of how the above markup renders"></p>
  
  <p>As you can see "Asset Search" is not inline with the form input. If i remove the <code>.input-append</code> class from the containing div things line up. However, the search icon is no longer embedded in the text box, but instead to the right of text box.</p>
  
  <p>How can I use <code>.form-inline</code> in cunjunction with <code>.input-append</code>?</p>