Quiero que cuando un div aumente su altura, el espacio que está definido entre ellos no se pierda.
el div de la mitad cuenta con 3 descripciones, el resto solo una, sucede que cuando el div de la mitad tiene las 3, los demás se apartan demasiado 'aumentan su espacio' y no quiero eso, quiero que conserven su espacio.
Ya sé que puedo lograr el efecto uniendo dos div dentro de una caja y poniendo los contenido en fila, pero ya tengo todo armado y no puedo por tiempo y además solo se podría con 1 div en cada fila y necesito los 3 en cada fila.
Lo que quiero lograr y está usando la app de facebook en estos momentos:
body{
background-color: #ddd;
}
.caja{
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: start;
flex-wrap: wrap;
background-color: #ff4000;
}
.contenido{
width: 30%;
height: auto;
margin-bottom: 10px;
text-align: center;
background-color: #f5f5f5;
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<div class="caja">
<div class="contenido">
<h2>hola</h2>
<p>descripcion</p>
</div>
<div class="contenido">
<h2>hola</h2>
<p>descripcion</p>
<p>2 descripciones</p>
<p>3 descripciones</p>
</div>
<div class="contenido">
<h2>hola</h2>
<p>descripcion</p>
</div>
<div class="contenido">
<h2>hola</h2>
<p>descripcion</p>
</div>
<div class="contenido">
<h2>hola</h2>
<p>descripcion</p>
</div>
<div class="contenido">
<h2>hola</h2>
<p>descripcion</p>
</div>
</div>
</body>
</html>