title: Bootstrap: Vertically center label in form-group
body: <p>I have a form-group inside a horizontal form. In this form-group, the right element is higher than the left one. For this reason, I want to center the left element vertically in its row. For instance:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;form class="form-horizontal"&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="inputEmail3" class="col-sm-2 control-label"&gt;Email1&lt;/label&gt;
        &lt;div class="col-sm-10"&gt; &lt;!-- higher element --&gt;
          &lt;input type="email" class="form-control" id="inputEmail3" placeholder="Email"&gt;
          &lt;br&gt;Random stuff
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="inputEmail3" class="col-sm-2 control-label"&gt;Email2&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;/form&gt; 
  </code></pre>
  
  <p><code>Email1</code> is currently shown at the top of its own row as can be seen in <a href="http://plnkr.co/edit/Om2f7LdxiorBrmbJYsVC" rel="noreferrer">this plunker snippet</a>.</p>
  
  <p>EDIT: So to clarify my intentions, this is the current state:</p>
  
  <p><img src="https://i.stack.imgur.com/bOg9j.png" alt="enter image description here"></p>
  
  <p>And this is what I would like to have (the blue area is the previously mentioned "row"):</p>
  
  <p><img src="https://i.stack.imgur.com/fhjBb.png" alt="enter image description here"></p>