The Reveller The Reveller - 10 months ago 76
CSS Question

Chrome align-items: baseline for select and input elements

I have built a form using flex box and it works beautifully in Firefox, Edge and IE11.

Unfortunately in Chrome the text in the spans isn't aligning consistently. It is fine if followed by a select but when followed by an input the text appears to align to the bottom rather than the baeline.

Incorrect layout in Chrome

Incorrect layou in Chrome

Correct layout in FF

Correct layout in FF

I have simplified my code and posted to

fieldset {
display: flex;
flex-direction: column;
label {
display: flex;
align-items: baseline;
flex-direction: row;
justify-content: flex-start;
padding: .3rem 0;
flex-wrap: wrap;
fieldset span {
text-align: right;
padding: 0 1rem 0 0;
textarea {
padding: .5rem;

<input type="text" />
<option value="" selected="" disabled=""></option>
<option value="Mr">Mr</option>
<option value="Dr">Dr</option>
<option value="Miss">Miss</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Ms">Mx</option>
<option value="Other">Other</option>

Answer Source

You need to add placeholder=" " to your inputs and they will align perfectly.