title: Validation of input field with icon does not work smoothly
body: <p>When my icon is inner the input-lg then when I click on the field, it looks like ... I mean my comment should be here, but it should not make the icon larger.
  I need comment will come, but out of icon and input lg field.</p>
  
  <p>Here is my demo code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
      $('#contact-form').validate({
          rules: {
              fullname: {
                  minlength: 4,
                  required: true
              },
              username: {
                  required: true,
                  email: true
              },
              password: {
                  minlength: 8,
                  required: true
              },
              confirm_password: {
                  minlength: 8,
                  required: true
              },
              mobile: {
                  minlength: 11,
                  required: true
              }
          },
          highlight: function (element) {
              $(element).closest('.control-group').removeClass('success').addClass('error');
          },
          success: function (element) {
              element.text('OK!').addClass('valid')
                  .closest('.control-group').removeClass('error').addClass('success');
          }
      });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
      &lt;form method="POST" class="form-horizontal" id="contact-form"&gt;
          &lt;div class="control-group"&gt;
              &lt;div class="controls"&gt;
                  &lt;div class="input-group input-group-lg"&gt;
                      &lt;span class="input-group-addon" id="sizing-addon1"&gt; &lt;span class="glyphicon glyphicon-user" aria-hidden="true"&gt;&lt;/span&gt;&lt;/span&gt;
                      &lt;input type="text" name="fullname" id="fullname" class="form-control" placeholder="Your name"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;p class="help-block"&gt;&lt;/p&gt;
  
          &lt;div class="control-group"&gt;
              &lt;div class="controls"&gt;
                  &lt;div class="input-group input-group-lg"&gt;
                      &lt;span class="input-group-addon" id="sizing-addon1"&gt; &lt;span class="glyphicon glyphicon-envelope" aria-hidden="true"&gt;&lt;/span&gt;&lt;/span&gt;
                      &lt;input type="email" name="username" id="username-reg" class="form-control" placeholder="Your email address"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;p class="help-block"&gt;&lt;/p&gt;
  
          &lt;div class="control-group"&gt;
              &lt;div class="controls"&gt;
                  &lt;div class="input-group input-group-lg"&gt;
                      &lt;span class="input-group-addon" id="sizing-addon1"&gt; &lt;span class="glyphicon glyphicon-lock" aria-hidden="true"&gt;&lt;/span&gt;&lt;/span&gt;
                      &lt;input type="password" name="password" id="password" class="form-control" placeholder="Your password"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;p class="help-block"&gt;&lt;/p&gt;
  
          &lt;div class="control-group"&gt;
              &lt;div class="controls"&gt;
                  &lt;div class="input-group input-group-lg"&gt;
                      &lt;span class="input-group-addon" id="sizing-addon1"&gt; &lt;span class="glyphicon glyphicon-lock" aria-hidden="true"&gt;&lt;/span&gt;&lt;/span&gt;
                      &lt;input type="password" name="confirm_password" id="repass" class="form-control" placeholder="Confirm your Password"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;p class="help-block"&gt;&lt;/p&gt;
  
          &lt;div class="control-group"&gt;
              &lt;div class="controls"&gt;
                  &lt;div class="input-group input-group-lg"&gt;
                      &lt;span class="input-group-addon" id="sizing-addon1"&gt; &lt;span class="glyphicon glyphicon-phone" aria-hidden="true"&gt;&lt;/span&gt;&lt;/span&gt;
                      &lt;input type="text" name="mobile" id="phone" class="form-control" placeholder="Mobile Number"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;p class="help-block"&gt;&lt;/p&gt;
  
      &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I need it like this:</p>
  
  <p><a href="https://i.stack.imgur.com/pcdyQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pcdyQ.png" alt="Enter image description here"></a></p>