El siguiente código simula al original
.padre{
border: 1px;
display: inline-block;
width: auto;
margin: 0 20px;
text-align: justify;
}
<div class="padre">
<div>
<h2> HIJO 1 CON TEXTO</h2>
<p> texto muy largo pero muy muy largo <p>
</div>
<div>
<h2> HIJO 2 CON TEXTO MAS COOL </h2>
<p> otro texto muy largo pero muy muy largo <p>
</div>
</div>
El problema que tengo es que, si bien mis cuadros quedan uno al lado del otro, los textos no quedan parejos verticalmente. Aparte los marcos de los dos cuadro en el centro quedan muy pegados. ¿Cómo podría separarlos sin que el margen de la página quede desparejo?