title: How do I align Bootstrap inline form labels that don't have an input with those that do?
body: <p>When the content is wide enough to have this all on the same row without line breaking (probably need to go full page with the snippet), the right label text is aligned slightly higher than the left label text. I'm trying to get the text of the two labels aligned to the same baseline.</p>
  
  <p>I've tried to use vertical align in various ways, tried to set the height the same as the left on the right group, but I can't get anything to work.</p>
  
  <p>Of course I could just set a fixed margin, but is there a responsive way to do this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.main {
    margin-top: 20px;
  }
  
  #left-input {
    width: 100px;
  }
  
  .vmiddle {
    /* does nothing ? */
    vertical-align: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;div class="container main"&gt;
    &lt;div class="row"&gt;
  
      &lt;div class="col-xs-6 "&gt;
        &lt;div class="form-inline"&gt;
          &lt;div class="form-group"&gt;
            &lt;label&gt;Left Label:&lt;/label&gt;
            &lt;input id="left-input" type="text" class="form-control" value="Some Value" /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-6 vmiddle"&gt;
        &lt;div class="form-inline"&gt;
          &lt;div class="form-group"&gt;
            &lt;label&gt;Right Label: Higher&lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>