Há diversas formas de fazer isso. Seja com float, position, vertical-align ou flexbox.
Aqui tratarei de utilizar o módulo do flexbox do CSS3.
Segue o exemplo:
<div id="box-main">
<article id="left-box">
<header>
<h1 title="Cabeçalho A">Cabeçalho A</h1>
</header>
<p>s simply dummy text of the printing and typesetting industry. Lorem has been the industry’s standard text ever sinn printer took a galley of type and scrambled it to make a </p>
</article>
<article id="right-box">
<header>
<h1 title="Cabeçalho B">Cabeçalho B</h1>
</header>
<p>s simply dummy text of the printing</p>
</article>
</div>
#box-main,
#box-main article,
#box-main article p { border:1px solid #000; }
#box-main {
padding:3em;
max-width:80%;
margin: 0 auto;
display:flex; // Determina como os elementos filhos se comportarão
}
#box-main article {
justify-content: space-between; // Determina o tipo de comportamento que os elementos terão
align-items: center; // Alinha os elementos filhos de #box-main na vertical
flex: 2; // Determina a quantidade de colunas dentro do #box-main
padding: 0 2em;
margin: 0 1em;
height: auto;
}
#box-main article header {
background-color: #ccc;
text-align: center;
}
#box-main article p {
padding: 1em;
height: auto;
min-height: 60px; // Para que o pagrafo fique sempre centralizado com a mesma altura
height: inherit; // Enquanto sua altura padrão é automática e aumentará conforme o conteúdo
max-height: 120px; // E aqui delimitamos o limite/ altura máxima
}
Resultado:
Espero ter ajudado :)
Referências sobre flexbox:
- CSS Flexbox (Flexible Box) (w3schools.com)
- A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks