ディビジョンボックスはインラインブロックを使用して正しく整列していません

Question

私は達成しようとしている見栄えに合った非常にシンプルなコードをいくつか持っています。私はboxContainerである外側divに含まれる "boxes"として表示される2つのdivを持っています。私は箱を互いの上に置くのではなく、隣り合わせに置いて、画面の中央に完全に配置します。ボックスの幅はブラウザの幅が小さくなるにつれて縮小/拡大し、ブラウザウィンドウが小さすぎるとページの中央に残り、ボックスはもう一方の上に移動します。完璧。

唯一の問題は、ボックスが上部の代わりに下部に配置されていることです。 2番目のボックスはその中のテキストが少ないので、1番目のボックスの下部に合わせるためにページのさらに下に押し込まれます。私は彼らの代わりにトップに揃えて欲しい。

これは表示によって引き起こされると信じています：インラインブロックですが、理由はわかりませんし、それを修正して上記の同じ機能を維持する方法がわかりません。

私を助けることができたら、私は確かにそれを感謝するだろう！

#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>

ピクチャー

ありがとうございます！

Answer 1

ボックスは既にinline-blockであるため、.boxスタイルにvertical-align: topを追加できます。

Answer 2

.boxクラスにvertical-align:top;を追加する必要があります。私DEMOで

.box { 
    vertical-align:top; 
}​ 

ルック。