Flexbox vertical alignment issue on input tag

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.