title: Boostrap 3, icon on the same line of textbox, should I really use a table?
body: <p>I'm trying to put the <code>glyphicon-question-sign</code> on the same line of the textbox. The only working solution I found is using a table but it shrinks the textbox length. I could stretch it back with CSS but I'm concerned about page responsiveness. What I am after is to have all the textbox of the same width and for some of them a clarification icon on the right.</p>
  
  <p>How would you solve this?</p>
  
  <p>Thanks.</p>
  
  <pre><code>&lt;div class="form-group" id="vatNumberDiv"&gt;
     @Html.LabelFor(m =&gt; m.vatNumber, new {@class = "col-md-2 control-label"})
     &lt;div class="col-md-10"&gt;
        @Html.TextBoxFor(m =&gt; m.vatNumber, new {@class = "form-control"})
        @Html.ValidationMessageFor(m =&gt; m.vatNumber, "", new {@class = "text-danger"})
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="form-group" id="destCodeDiv"&gt;
      @Html.LabelFor(m =&gt; m.destCode, new { @class = "col-md-2 control-label" })
      &lt;div class="col-md-10"&gt;
          &lt;table&gt;
             &lt;tr&gt;
                &lt;td&gt;
                  @Html.TextBoxFor(m =&gt; m.destCode, new { @class = "form-control" })
                  @Html.ValidationMessageFor(m =&gt; m.destCode, "", new { @class = "text-danger" })
                &lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
                  &lt;span class="glyphicon glyphicon-question-sign" aria-hidden="true" data-toggle="tooltip" data-placement="right" title="Description text..." style="font-size: 1.2em"&gt;&lt;/span&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><a href="https://i.stack.imgur.com/c4Wof.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c4Wof.png" alt="enter image description here"></a></p>