JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<content>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
</content>

CSS

content{
  display: block;
  width: auto;
  margin: 16px;
  padding: 4px;
  background: #fff;
  font-size: 48px;
  
}

content div{
  display: inline-block; /* блоки на одной строке */
  min-height: 128px;
  width: calc(100% / 4 - 8px); /* Используем CSS3 для расчёта ширины блоков,
                               вычтем отступы, созданные margin и padding */
  background: #ccc;
  margin: 4px;
  vertical-align: middle;
}

JavaScript

$(function() {
  var myWidth = $('content div').width(); // получаем ширину
  $('content div').css("height", myWidth); // устанавливаем её
});