var $j = jQuery.noConflict(); $j(function($){ var height_base = 0; $('#contenedor h3').each(function(){ if($(this).height()>height_base){ height_base = $(this).height(); } }).height(height_base); });
<div id="contenedor"> <div> <h3> Título 1 </h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> <div> <h3> Título 2 (mayor que el primero) </h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed rutrum lacus. </p> </div> <div> <h3> Título 3 (en tres líneas, mucho más grande que los otros dos) </h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed rutrum lacus. Duis iaculis aliquet tortor id fermentum. </p> </div> </div>
#contenedor { display: flex; } #contenedor > div { border: 1px solid #000; box-sizing:border-box; padding:20px; width: 33%; } #contenedor > div * { text-align: center; margin: auto; } #contenedor h3{ display:flex; align-items:center; }