impedir cabeçalho de ser afetado

[Biel. 9]

Olá pessoal Direto ao ponto. A imagem abaixo tem EX1 e EX2 . Como fazer o código imprimir o mesmo resultado que o EX2 ?  Obrigado !

<style>
*{ margin:0; padding:0;}

.divprincipal{
	display: flex; 
	flex-wrap:wrap;  
	align-items: center; 
	
	padding:10px; 
	border:1px solid black;
	}

.aprendiz{ width:300px; margin-left:20px;  border:1px solid black; }
	
h1{
    width:100%;
    display:block;   

	}	
	
b{
	font-weight:normal;
	margin-bottom:8px;
	line-height:24px;
	display:block; 
	border:1px solid black;
	}
	
</style>

<div class="divprincipal">

<div class="aprendiz">

<h1>cabeçalho A</h1>
<b> 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 </b>
</div>


<div class="aprendiz">

<h1 >cabeçalho B</h1>

<b>s simply dummy text of the printing  </b>

</div>

</div>

 

[Kaique Prazeres. 0]

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