Le caselle div non si allineano correttamente usando il blocco in linea

Question

Ho un codice molto semplice che funziona perfettamente per quello che sto cercando di ottenere. Ho due div che vengono visualizzati come "scatole" che sono contenute in un div esterno che è il boxContainer. Ho le scatole una accanto all'altra piuttosto che una sopra l'altra, e sono allineate perfettamente nel mezzo dello schermo. Le larghezze delle caselle si restringono/crescono man mano che la larghezza del browser diventa più piccola/più grande e le caselle si riposizionano in modo da essere una sopra l'altra se la finestra del browser diventa troppo piccola, pur rimanendo centrata sulla pagina. Perfezionare.

L'unico problema è che le caselle sono allineate in basso anziché in alto. Poiché la seconda casella contiene meno testo, viene spostata più in basso nella pagina per allinearla alla parte inferiore della prima casella. Voglio che si allineino in alto invece.

Credo che questo sia causato dal display: inline-block, ma non sono sicuro del perché, e non so come risolverlo e mantenere le stesse funzionalità che ho elencato sopra.

Se potessi aiutarmi, lo apprezzerei sicuramente !!

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

Immagine

Grazie!

Answer 1

Poiché le caselle sono già inline-block è possibile aggiungere vertical-align: top allo stile .box.

Answer 2

È necessario aggiungere vertical-align:top; alla classe .box.

.box { 
    vertical-align:top; 
}​ 

Guardate il mio DEMO.