Ящики Div не выравниваются правильно, используя встроенный блок

У меня есть очень простой код, который отлично подходит для того, что я пытаюсь достичь. У меня есть два div, которые отображаются как "ящики", которые содержатся в внешнем div, который является boxContainer. У меня есть коробки, сидящие рядом друг с другом, а не одна поверх другой, и они выровнены идеально в середине экрана. Ширины коробок уменьшаются/растут, когда ширина браузера становится меньше/больше, и коробки переместятся друг на друга, если окно браузера становится слишком маленьким, оставаясь в центре на странице. Совершенная.

Единственная проблема заключается в том, что поля выравниваются снизу, а не сверху. Поскольку у второго блока меньше текста внутри него, он продвигается дальше по странице, чтобы выровнять его с нижней частью первого окна. Я хочу, чтобы они выравнивались сверху.

Я считаю, что это вызвано отображением: inline-block, но я не уверен, почему, и я не знаю, как его исправить и сохранить те же функции, что и выше.

Если бы вы могли мне помочь, я бы, конечно же, это понял!

#boxContainer {
    width:80%;
    margin:0 auto;
    text-align:center;
}
.box {
    display:inline-block;
    width:35%;
    margin:20px;
    border:solid 5px;
    border-radius:40px;
}

<div id="boxContainer">
    <div class="box">
        <h3>BOX 1</h3>
        <p>TEXT GOES HERE, blaha dlfjas fakfasldfjas fkdf lasfjwio we dklajdakfliwo wklw jdkas fdsaj fjdsfwoif ajkdl kdalfej woja dklf woef adkiweoj daljidw odal fjwe ewew kalwoie ea falk blaha dlfjas fakfasldfjas fkdf lasfjwio we dklajdakfliwo wklw jdkas fdsaj fjdsfwoif ajkdl kdalfej woja dklf woef adkiweoj daljidw odal fjwe ewew kalwoie ea falk</p>
    </div>

    <div class="box">
        <h3>BOX 2</h3>
        <p>TEXT GOES HERE, blaha dlfjas fakfasldfjas fkdf lasfjwio we dklajdakfliwo wklw jdkas fdsaj fjdsfwoif ajkdl kdalfej woja dklf woef adkiweoj daljidw odal fjwe ewew kalwoie ea falk</p>
    </div>
</div>