Flexbox vertical alignment issue on input tag

css, flexbox, vertical-alignment

Solution

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='example@gmail.com' />
</div>

or

<div>
  <label>Email:</label>
  <input type='text' placeholder='example@gmail.com' />
</div>

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

Problem

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.

Original source