Div boxes not aligning properly using inline-block - html

Question

I have some very simple code which works perfect for what look I'm trying to achieve. I have two divs which are displayed as "boxes" which are contained within an outer div which is the boxContainer. I have the boxes sitting next to each other rather than one on top of the other, and they are aligned perfectly in the middle of the screen. The boxes widths shrink/grow as the browser width gets smaller/larger, and the boxes relocate to be one on top of the other if the browser window gets too small, while remaining centered on the page. Perfect.
The only problem is that the boxes are aligned on the bottom instead of the top. Because the second box has less text within it, it is pushed further down the page to align with the bottom of the first box. I want them to align on the top instead.
I believe this is caused by display:inline-block, but I'm not sure why, and I don't know how to fix it and keep the same features I listed above.
If you could help me out, I'd surely appreciate it!!
#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>
Picture
Thank you!

Answer 1

Since the boxes are already inline-block you can add vertical-align: top to the .box style.

Answer 2

.box {
display: inline-block;
border: solid 1px;
vertical-align: top;
width: 40%;
}
<div id="boxContainer">
<div class="box">
<h3>BOX 1</h3>
<p>Lorem ipsum dolor sit amet, altera interesset pri an. Et aeque interpretaris vel, at quo summo deleniti disputationi. Eu inimicus splendide duo, soleat intellegam ut per. Sint impedit recusabo ex vix, aliquid adipisci consequat no ius. Eu possim consequat eum, sea cu quaeque impedit, est fuisset accusamus definiebas ad.</p>
</div>
<div class="box">
<h3>BOX 2</h3>
<p>Viris eruditi consectetuer ei mea, eu nulla ridens officiis duo. In atomorum forensibus abhorreant quo, id nec aperiam dissentiet.</p>
</div>
</div>
You can use the vertical-align CSS property.
It has effect only on inline, and inline-block elements.
This is a great reference on vertical-align.