JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap-col">
  <div class="col-3 square">
      <div class="content">апраппропропрр</div>
  </div>
  <div class="col-3 square">
      <div class="content">апраппропропрр<br>
      апраппропропрр<br></div>
  </div>
  <div class="col-3 square"><div class="content">па паропроропао</div></div>
   <div class="col-3 square"><div class="content">апропао</div></div>

  <div class="col-3 square"></div>
  <div class="col-3 square"></div>
  <div class="col-3 square"></div>
  <div class="col-3 square"></div>
</div>

<div class="wrap-col">
  <div class="col-3 square"></div>
  <div class="col-3 square"></div>
  <div class="col-6 rect"></div>

  <div class="col-6 rect"></div>
  <div class="col-3 square"></div>
  <div class="col-3 square"></div>
</div>

CSS

.wrap-col {
  overflow: hidden;
  margin-bottom: 2em;
}
[class^="col-"] {
  position: relative;
  float: left;
  outline: 3px solid;
}
[class^="col-"]:after {
  content: "";
  display: block;
}

.col-3 {
  width: 25%;
  background-color: #85C7EB;
  outline-color: #38A4DE;
}

.col-6 {
  width: 50%;
  background-color: #A4DD71;
  outline-color: #76C42F;
}

.col-3.square, .col-6.rect {
    padding-top: 25%;
}

.col-6.square {
    padding-top: 50%;
}

.content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}