JSFiddle - React, Tailwind, and code Playground
HTML
<content>
<div><p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint cum facere repellendus voluptatibus, vel atque eveniet voluptas dolor deserunt consectetur consequuntur suscipit nisi alias culpa quaerat minima dicta est error doloribus esse aperiam vitae rem neque distinctio dignissimos. At excepturi, cum reiciendis. Quisquam velit dolores veritatis ipsum aut porro similique.
</p></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
</content>
CSS
content{
display: block;
height: auto;
width: auto;
margin: 16px;
padding: 4px;
background: #fff;
}
content div{
display: inline-block; /* блоки на одной строке */
height: 0 auto;
width: calc(100% / 4 - 24px); /* Используем CSS3 для расчёта ширины блоков,
вычтем отступы, созданные margin и padding */
background: #ccc;
margin: 4px;
padding: 8px;
overflow: hidden;
}
content div p{
max-height: 100%;
margin: 0;
overflow: hidden;
}
JavaScript
function equalWidthAndHeight () {
var myWidth = $('content div').width(); // получаем ширину
$('content div').css("height", myWidth); // устанавливаем её
}
$(function() {
equalWidthAndHeight();
$(window).resize(equalWidthAndHeight);
});