title: How to align inputs in bootstrap form with input-group-addons?
body: <p>I have a very simple form with Bootstrap 3 which I can easily (automatically) align when I don't use <code>input-group-addon</code>s. </p>
  
  <p>After I use them in my form it is impossible to align it (the line with addons is wider because of added addons)</p>
  
  <pre><code>&lt;form class="form-horizontal" role="form"&gt;
  
      &lt;div class="form-group"&gt;
        &lt;label for="product_name" class="col-sm-2 control-label"&gt;Product name&lt;/label&gt;
        &lt;div class="col-sm-4"&gt;
          &lt;input type="text" class="form-control" id="product_name" placeholder="Product name"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
        &lt;label for="product_price" class="col-sm-2 control-label"&gt;Price&lt;/label&gt;
        &lt;div class="col-sm-4 input-group"&gt;
          &lt;span class="input-group-addon"&gt;$&lt;/span&gt;
          &lt;input type="text" class="form-control bfh-number" id="product_price" placeholder="Price" data-min="0" data-max="9999999"&gt;
          &lt;span class="input-group-addon"&gt;.00&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
        &lt;label for="product_description" class="col-sm-2 control-label"&gt;Description&lt;/label&gt;
        &lt;div class="col-sm-6"&gt;
          &lt;textarea class="form-control" id="product_description" placeholder="Description" rows="5"&gt;&lt;/textarea&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
        &lt;div class="col-sm-offset-2 col-sm-10"&gt;
          &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JsFiddle: <a href="http://jsfiddle.net/Yzxy3/">http://jsfiddle.net/Yzxy3/</a></p>