title: bootstrap 3: add icon outside of input
body: <p>I add icon outside input box with <code>&lt;a&gt;&lt;i&gt;&lt;i/&gt;&lt;/a&gt;</code> method and <code>&lt;div style="padding:15px"&gt;&lt;/div&gt;</code>. but output is broken :</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div class="form-group"&gt;
      &lt;label for="" class="col-lg-1 control-label"&gt;input&lt;/label&gt;
      &lt;div class="col-lg-9"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-6"&gt;
                  &lt;div class="input-group input-group-md"&gt;
                  &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-file-text"&gt;&lt;/i&gt;&lt;/span&gt;
                  &lt;input class="form-control" type="text" name="files" placeholder="test"&gt;   
                  &lt;/div&gt;
              &lt;div style="padding:15px"&gt;&lt;a class="help-box" rel="popover" data-placement="top" data-original-title="title" data-content="My content goes here"&gt;&lt;i class="fa fa-question fa-lg help-ic"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Broken :</p>
  
  <p><img src="https://i.stack.imgur.com/DSEB1.png" alt="enter image description here"></p>
  
  <p>I need to :</p>
  
  <p><img src="https://i.stack.imgur.com/TWFfR.png" alt="enter image description here"></p>
  
  <p>Ouput Is: <a href="http://jsfiddle.net/W2zxk/1/" rel="nofollow noreferrer">http://jsfiddle.net/W2zxk/1/</a></p>
  
  <p>How do fix this?</p>