Flexbox vertical alignment issue on input tag

Question

Basically, I have a label and a text input inline with one another in a flexbox, with the input flexing, align-items set to baseline. The input flexes to fill out the containing div properly, but the label aligns with the bottom of the input instead of where the text baseline should be.

This problem presents itself in Chrome, and possibly other WebKit browsers.

Here's the code. You can check out how it renders in this Codepen.

HTML:

<div>
  <label>Email:</label>
  <input type='text' />
</div>

CSS:

div{
  width:20rem;
  background:#999;
  padding:.5rem;

  display:flex;
  align-items:baseline;
}

input{
  flex:1;
}

If you comment out display: flex, the alignment is correct, but naturally it's no longer flexing.

How can I fix this without using a hack like align-items: center?

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.

Answer 1

Basically, without the presence of a value or placeholder attribute on the input, the layout engine interprets the baseline of the input as the bottom of the input, not where the text baseline should be.

So the modified HTML would look like:

<div>
  <label>Email:</label>
  <input type='text' value='[email protected]' />
</div>

or

<div>
  <label>Email:</label>
  <input type='text' placeholder='[email protected]' />
</div>

This is a bug with the layout engine, and the devs have been notified. You can read more about the bug here.

Answer 2

Add to the other answers, <input type="text" placeholder=" "> works great if you don't want to actually show any placeholding text.