JSFiddle - React, Tailwind, and code Playground
HTML
<div class="column">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit sit odio harum aliquam nisi quisquam cum sint fugit soluta. Iusto porro quae saepe ad dicta corporis fugit accusantium ducimus.</div>
<div class="column">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, enim!</div>
<div class="column">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, enim! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, dolore, numquam ipsum iusto nobis maiores at. Voluptatibus enim reiciendis voluptas nam autem. Iure, suscipit, quisquam magni at doloremque magnam incidunt?</div>
CSS
.column {
border: 1px solid red;
}
@media screen and (min-width: 30em) {
.column {
display: inline-block;
width: 32%;
border: 1px solid red;
vertical-align: top;
}
}
JavaScript
// On cible nos div .column
var column = document.querySelectorAll('.column');
// On récupère la taille max de .column et on l'applique à toutes les autres
function sameHeight(el) {
var maxHeight = 0;
for (var i = 0; i < el.length; i++) {
thisHeight = el[i].clientHeight;
if(thisHeight > maxHeight) {
maxHeight = thisHeight;
}
}
for (var i = 0; i < el.length; i++) {
el[i].style.height = maxHeight + 'px';
}
}
// On n'appelle la fonction qu'au dessus d'une certaine résolution, une fois le DOM prêt
if (window.matchMedia("(min-width: 30em)").matches) {
sameHeight(column);
}
// Histoire de garder tout ça propre, on applique une fonction au resize de la fenêtre
window.addEventListener('resize', resizeWindow, false)
function resizeWindow() {
if (window.matchMedia("(min-width: 30em)").matches) {
for (var i = 0; i < column.length; i++) {
column[i].style.height = 'auto';
}
sameHeight(column);
}
else {
for (var i = 0; i < column.length; i++) {
column[i].style.height = 'auto';
}
}
}