title: bootstrap input group btn pushed down after jquery validation kicks in
body: <p>I have a bootstrap styled form:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
              &lt;label for="formEmail"&gt;User Email&lt;/label&gt;
              &lt;div class="input-group"&gt;
                  &lt;select class="form-control" data-rule-emailRequired="true" name="email" id="formEmail"&gt;
                      &lt;option value="default"&gt;Please Select Users&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;span class="input-group-btn"&gt;
                      &lt;button class="btn btn-default" id="addUserBtn" type="button"&gt;Create User&lt;/button&gt;
                  &lt;/span&gt;
                  &lt;span class="input-group-btn"&gt;
                      &lt;button class="btn btn-default" id="newUserBtn" type="button"&gt;Add User&lt;/button&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
              &lt;ul id="issueUserList" class="list-group list-inline"&gt;&lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>as you can see it has a data rule validation, when this returns false and the error message pops up it pushes the input-group-btn below see next image
  <a href="https://i.stack.imgur.com/NC23a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NC23a.png" alt="enter image description here"></a></p>
  
  <p>my CSS is</p>
  
  <pre><code>.input-validation-error { border: 2px solid red; }
  
  .field-validation-error { color: red; }
  
  label.error {
      color: red;
  }
  input.error, textarea.error, select.error {
      color: black;
      background-color: #ebccd1;
      border-color: #ebccd1;
      border: 2px solid red;
  }
  
  
  div #loading {
      display: none;
  }
  
  .input-group {width: 100%}
  #issueTable_length {
      margin-top: 2%;
  }
  .jumbotron {
      margin-top: 2%;
  }
  </code></pre>
  
  <p>Could someone give me any advice or tell me what I'm doing wrong? 
  Thanks in advance</p>