title: Flexbox vertical alignment issue on input tag
body: <p>Basically, I have a <code>label</code> and a text <code>input</code> inline with one another in a flexbox, with the <code>input</code> flexing, <code>align-items</code> set to baseline. The <code>input</code> flexes to fill out the containing <code>div</code> properly, but the <code>label</code> aligns with the bottom of the <code>input</code> instead of where the text baseline should be.</p>
  
  <p>This problem presents itself in Chrome, and possibly other WebKit browsers.</p>
  
  <p>Here's the code. <a href="http://codepen.io/anon/pen/olhvK" rel="nofollow">You can check out how it renders in this Codepen.</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
    &lt;label&gt;Email:&lt;/label&gt;
    &lt;input type='text' /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div{
    width:20rem;
    background:#999;
    padding:.5rem;
  
    display:flex;
    align-items:baseline;
  }
  
  input{
    flex:1;
  }
  </code></pre>
  
  <p>If you comment out <code>display: flex</code>, the alignment is correct, but naturally it's no longer flexing.</p>
  
  <p>How can I fix this without using a hack like <code>align-items: center</code>?</p>
  
  <p>Note: I originally posted this question and answer in a different question and it was deleted. I've revised it as suggested and hopefully it meets the guidelines now.</p>