JSFiddle - React, Tailwind, and code Playground

by Pavel Mareš

HTML

<div class="element">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
<div class="element">text</div>
<div class="element">text</div>
<div class="element">text</div>

CSS

div { width: 23%; margin-right: 2%; background: black; color: white; position: relative; float: left; word-break: break-all; }
div:last-child { margin-right:0; }

JavaScript

function window_width() {
	var w = window,
		d = document,
		e = d.documentElement,
		g = d.getElementsByTagName('body')[0];

	return w.innerWidth || e.clientWidth || g.clientWidth;
}

function setHeight() {
    var elements = document.querySelectorAll('.element');
    var maxHeight = 0;
    
    elements.forEach((item) => {
    	item.style.height = 'auto';
		maxHeight = item.offsetHeight > maxHeight ? item.offsetHeight : maxHeight;
	});
    
    var paddingLeft = parseInt( window.getComputedStyle(elements[0], null).getPropertyValue('padding-left') );
    var paddingRight = parseInt( window.getComputedStyle(elements[0], null).getPropertyValue('padding-right') );
    maxHeight = maxHeight - paddingLeft - paddingRight;
    
    elements.forEach((item) => {
		item.style.height = window_width() >= 992 ? 'auto' : maxHeight + 'px';
	});
}

setHeight();

window.addEventListener('resize', function () {
    setHeight();
});