选择元素无法与 CSS 网格一起正常工作

Question

标题。我已经设法使用网格并排对齐 2 个 div，这很好，但是一旦第二个 div 的内容是一个选择元素，第二个 div 出于某种原因更短，我该如何解决？

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

select 元素没有特殊的样式，只是装饰性的

Answer 1

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