[SOLUCIONADO] DIVs internos con misma altura

[berkeleyPunk]

Existen un montón de lugares en internet que te dicen cómo lograr que 3 divs juntos, uno tras otro, tengan la misma altura. La cosa es que yo necesito algo un poco más complejo.

En este JSfiddle verán mi caso. Como ven, tengo 3 divs juntos que ya tienen la misma altura. Y eso está muy bueno, pero lo que necesito ahora es que los H3 tengan la misma altura, para que todo se vea ordenado.

Con un min-height de 200px a los H3 arreglamos las cosas de una vez. El problema con esto es que si ponemos un títulos más largos, ese min-height a 200px ya no sirve de nada y todo se vuelve a descuadrar.

¿Alguna idea? ¿Es posible hacer esto sólo con CSS sin recurrir a jQuery?

Saludos!

[ArturoGallegos]

Empieza por quitarte de la cabeza esa mala practica de usar display table

Dado que es un sub elemento no puedes ajustar ese tamaño directo con CSS, tendrás que recurrir a javascript.
Por ejemplo con jQuery seria así

[berkeleyPunk]

Iniciado por ArturoGallegos

Empieza por quitarte de la cabeza esa mala practica de usar display table...

Gracias, ArturoGallegos!
¿Podrías explicar esto de que te cito? ¿Por qué es mala práctica?

[ArturoGallegos]

Bueno mas que una mala practica es un procedimiento obsoleto y yo personalmente lo veo como mala practica.

Usar display table lo que hace es emular una tabla html, que generalmente te obligara a utilizar código html adicional para emular la tabla en si., sumado a eso pierdes flexibilidad al crear tu diseño.

Te muestro este ejemplo rápido, fijate la cantidad de código empleado en cada uno para crear 2 filas de 3 columnas, asi como el resultado. (ignora la sección javascript, no se como ocultarla aquí)




Ahora imaginate cuando llega el momento del responsive? con flex solo cambias el ancho de la columna y listo pero con una tabla?

[berkeleyPunk]

Excelente! Muchas gracias por todo! Saludos!