title: Form element wrong alignment, bootstrap3
body: <p>I have a problem with horizontal form in bootstrap3.</p>
  
  <p>The alignment of label-button is fine as long as the label text is not too long.
  The alignment of label-checkbox is fine as long as the checkbox has some text after it.</p>
  
  <p>Working example:
  <a href="https://i.stack.imgur.com/AmCi8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AmCi8.png" alt="enter image description here"></a></p>
  
  <pre><code> &lt;form class="form-horizontal"&gt; 
    &lt;fieldset&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="inputEmail3" class="col-sm-2 control-label"&gt;Email&lt;/label&gt;
      &lt;div class="col-sm-10"&gt;
        &lt;input type="email" class="form-control" id="inputEmail3" placeholder="Email"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
     &lt;div class="form-group"&gt;
      &lt;label for="inputEmail3" class="col-sm-2 control-label"&gt;Download excel file.&lt;/label&gt;
      &lt;div class="col-sm-10"&gt;
        &lt;button type="submit" class="btn btn-default"&gt;Sign in&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
       &lt;label for="inputEmail3" class="col-sm-2 control-label"&gt;Email&lt;/label&gt;
      &lt;div class="col-sm-10"&gt;
        &lt;div class="checkbox-inline"&gt;
          &lt;label&gt;
            &lt;input type="checkbox"&gt; Remember me
          &lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Now the alignment goes haywire when I add a longer label and don't include any text behind the check box:</p>
  
  <p><a href="https://i.stack.imgur.com/SKS0N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SKS0N.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;form class="form-horizontal"&gt; 
    &lt;fieldset&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="inputEmail3" class="col-sm-2 control-label"&gt;Email&lt;/label&gt;
      &lt;div class="col-sm-10"&gt;
        &lt;input type="email" class="form-control" id="inputEmail3" placeholder="Email"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
     &lt;div class="form-group"&gt;
      &lt;label for="inputEmail3" class="col-sm-2 control-label"&gt;Download excel file bdhjfjsdhbfjshdb sjdhfhjsdhfhjgsdb&lt;/label&gt;
      &lt;div class="col-sm-10"&gt;
        &lt;button type="submit" class="btn btn-default"&gt;Sign in&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
       &lt;label for="inputEmail3" class="col-sm-2 control-label"&gt;Email&lt;/label&gt;
      &lt;div class="col-sm-10"&gt;
        &lt;div class="checkbox-inline"&gt;
          &lt;label&gt;
            &lt;input type="checkbox"&gt;
          &lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>You can clearly see the Sing In button going a bit higher than the label and the checkbox being a bit lower than the label.</p>
  
  <p>I do not understand why this is happening and I need the second form to look normal. I hope someone can help me.</p>