The title. I've managed to align 2 divs side by side using grid, thats fine, but as soon as the content of the second div is a select element, the second div is for some reason shorter, how can I fix that?

CSS

.inputwrap{
    display: grid;
    grid-template-areas: 'halfl halfr';
    grid-column-gap: 2%;
}
.input50r{
    grid-area: halfr;
    display:  grid;
}
.input50l{
    grid-area: halfl;
    display:  grid;
}

HTML

<div class='input50l'>
  <input type='password' name='encKey' placeholder='Password' />
</div>
<div class='input50r'>
  <select>
    <option>Option</option>
    <option>Option</option>
  </select>
</div>

problem example

The select element has no special styling, just cosmetic

CodePudding user response：

.inputwrap{
    display: grid;
    grid-template-areas: 'halfl halfr';
    grid-column-gap: 2%;
    grid-template-columns: 1fr 1fr;
}