Los cuadros de distribución no se alinean correctamente con el bloque en línea

Tengo un código muy simple que funciona perfecto para la apariencia que bash lograr. Tengo dos divs que se muestran como “cajas” que están contenidas dentro de un div externo que es el boxContainer. Tengo los cuadros uno al lado del otro en lugar de uno encima del otro, y están perfectamente alineados en el medio de la pantalla. El ancho de los cuadros se encoge / crece a medida que el ancho del navegador se hace más pequeño / más grande, y los cuadros se reubican para estar uno encima del otro si la ventana del navegador se vuelve demasiado pequeña, mientras permanece centrado en la página. Perfecto.

El único problema es que las cajas están alineadas en la parte inferior en lugar de en la parte superior. Debido a que el segundo cuadro tiene menos texto dentro, se empuja más hacia abajo en la página para alinearse con la parte inferior del primer cuadro. Quiero que se alineen en la parte superior en su lugar.

Creo que esto se debe a la visualización: bloque en línea, pero no estoy seguro de por qué, y no sé cómo solucionarlo y mantener las mismas características que mencioné anteriormente.

¡Si pudieras ayudarme, seguramente lo apreciaría!

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

BOX 1

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

BOX 2

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

Imagen

enter image description here

¡Gracias!

Como las casillas ya están en inline-block puede agregar vertical-align: top al estilo .box .

 .box { display: inline-block; border: solid 1px; vertical-align: top; width: 40%; } 
 

BOX 1

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.

BOX 2

Viris eruditi consectetuer ei mea, eu nulla ridens officiis duo. In atomorum forensibus abhorreant quo, id nec aperiam dissentiet.