2つの箱を同じ高さに揃えたいです：：HTML, CSS

Question

白い箱と、赤い箱を同じ高さで並べたいと考えています。

現状は、inputと同じ高さに　aaaaaaaaが配置され、赤い箱の位置がずれてしまってしまいます。

これを同じ高さに揃えるにはどのようなコードになるかお聞かせ願えませんでしょうか：：

よろしくお願いいたします；；

<div class="product_display">
<form id="service_type" action="/services" accept-charset="UTF-8" method="get">
<input name="utf8" type="hidden" value="&#x2713;" />
<select style="margin: 10px;" name="serviceForm[type]" id="serviceForm_type">

<option value="">全ての商品</option>
<option value="Youtube views">A</option>
<option value="Youtube like">B</option>
<option value="Youtube dislike"C</option>
<option value="Twitch subscribers">D</option></select><select style="margin: 10px;" name="serviceForm[order]" id="serviceForm_order"><option value="">価格が安い順</option>

<option value="0">価格が安い順</option>
<option value="1">価格が高い順</option>

</select>
<input type="submit" name="commit" value="確認" data-disable-with="確認" />
</form>

<div class="select_category">
aaaaaaaaaa
</div>
</div>

#service_type {
    display: inline-block;
    margin-bottom: 1vw;
    border: #545454 1px solid;
    width: 30%;
    height: 20vw;
}

.select_category{
    width: 28%;
display: inline-block;
height: 19vw;
padding-top: 1.5vw;
background-color: red;
margin-left: 1vw;
margin-bottom: 1vw;
  }

Comments

[yoshinavi]

＞現状は、inputと同じ高さに　aaaaaaaaが配置され、赤い箱の位置がずれてしまってしまいます。

→　提示のコードだと、赤い箱の位置は、デバイス画面幅で変わるかと思います。
inputの高さをどのように確認されていますか？

Answer 1

flexboxで揃えるのはいかがでしょうか？

.product_display {
  display: flex;
}

もう迷わない！CSS Flexboxの使い方を徹底解説
flexboxを使いこなせると、boxのレイアウトが楽になるので
上記URL合わせてご確認いただければと思います。

Answer 2

.product_display > * {
    vertical-align: top;
}

こんな感じでどうでしょう？