title: jQuery validation moves bootstrap button add-on
body: <p>I am using the jQuery Validation plugin and it works great - however, on a field where I am using a bootstrap button add-on, when the required alert is shown, the button doesn't move with the text box - I've replicated the issue here: <a href="http://jsfiddle.net/qhb5bb65/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p><a href="https://i.stack.imgur.com/4Whv9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Whv9.png" alt="enter image description here"></a></p>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;form id="frmPO" action="" method="get" runat="server"&gt;
  &lt;div class="form-group input-sm"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-6"&gt;
                      &lt;label for="txtClientContract"&gt;
                          Client Contract&lt;/label&gt;
                      &lt;div class="input-group"&gt;
                          &lt;input type="text" class="form-control" id="txtClientContract" runat="server" required/&gt;
                          &lt;span class="input-group-btn"&gt;
                              &lt;button class="btn btn-default" type="button" id="btnClientContracts" &gt;
                                  ...&lt;/button&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                    &lt;/br&gt;
             &lt;div class="row"&gt;
                  &lt;div class="form-group col-sm-4"&gt;
                      &lt;button id="btnSavePO" type="button" class="btn btn-default"&gt;
                          Create Purchase Order&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
                  &lt;/div&gt;
    &lt;/div&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>Any help would be much appreciated, thanks</p>