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 foll

Solution 1:

It's because of align-items: baseline;. Instead use align-items: center;

Here is the updated codepen

form,
fieldset {
  display: flex;
  flex-direction: column;
}
label {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
  padding: .3rem0;
  flex-wrap: wrap;
}
fieldsetspan {
  text-align: right;
  padding: 01rem00;
}
input,
select,
textarea {
  padding: .5rem;
}

<form><fieldset><label><span>Label</span><inputtype="text" /></label><label><span>Label</span><select><optionvalue=""selected=""disabled=""></option><optionvalue="Mr">Mr</option><optionvalue="Dr">Dr</option><optionvalue="Miss">Miss</option><optionvalue="Mrs">Mrs</option><optionvalue="Ms">Ms</option><optionvalue="Ms">Mx</option><optionvalue="Other">Other</option></select></label></fieldset></form>

Solution 2:

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