JSFiddle - React, Tailwind, and code Playground

HTML

<div class="square">
  <div>
     <p>
     asdadasd
     </p>
     <br>
     <p>
     asdadasd
     </p>
     <br>
     <p>
     asdadasd
     </p>
     <br>
     <p>
     asdadasd
     </p>
     <br>
     <p>
     asdadasd
     </p>
     <br>
     <p>
     asdadasd
     </p>
     <br>
     <p>
     asdadasd
     </p>
     <br>
  </div>
</div>
<div class="square">
   <div>
     <p>
     asdadasd
     </p>
     <br>
     <p>
     asdadasd
     </p>
     <br>
     <p>
     asdadasd
     </p>
     <br>
     <p>
     asdadasd
     </p>
     <br>
     <p>
     asdadasd
     </p>
     <br>
     <p>
     asdadasd
     </p>
     <br>
     <p>
     asdadasd
     </p>
     <br>
  </div>
</div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<span></span>

CSS

html{margin:0;}
body {margin:5%;}

.square {
  width:40%;
  padding-bottom:40%;
  background:pink;
  margin:5%;
  float:left;
  position:relative;
}

.square div {
  position:absolute;
  width:100%;
  background:#bbb;
  height:100%;
}

span{
  clear:both;
  display:block; 
}