JSFiddle - React, Tailwind, and code Playground

HTML

<div class="square"></div>
<div class="square"></div>

CSS

.square {
  float: left;
  width: 48%;
  margin-right: 1%;
  background: red;
}

.square:after {
  content: '';
  display: inline-block;
  height: 0;
  padding-bottom: 100%;
}