JSFiddle - React, Tailwind, and code Playground

HTML

<div class="root">
<div class="row row-lg">
<div class="element">
Licznik 1
</div>
<div class="element">
Licznik 2
</div>
<div class="element">
Licznik 3
</div>
<div class="element">
Licznik 4
</div>
</div>

<div class="row row-xl">
<div class="element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consequat sem in risus fermentum iaculis. Aliquam erat volutpat. Aliquam in erat ut libero consequat ultrices non nec turpis. Fusce et neque lobortis, condimentum nisl in, tempor ante. Morbi ullamcorper turpis id pretium lobortis. Morbi facilisis orci orci, vel dictum enim tincidunt sed. Etiam porttitor pulvinar gravida. Aliquam nunc orci, varius sit amet eleifend ac, viverra in ante. Aliquam sed arcu sed risus consectetur suscipit. Suspendisse vulputate, urna faucibus euismod pharetra, risus erat porttitor enim, at ultrices odio massa at erat. Donec venenatis erat non lacus tincidunt, eu vulputate lorem aliquam. Quisque ut leo suscipit, rhoncus magna et, vehicula dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi finibus nibh in placerat semper. Fusce eu lacus quis libero vulputate porttitor. 
</div>
</div>


<div class="row row-lg">
<div class="element">
Test 1
</div>
<div class="element">
Test 2
</div>
</div>


</div>

CSS

.root {
  
  display: block;
  background: green;
  width: 100%;
  position: relative;
  left: 10px;
  top: 10px;
  padding: 5px;
}
.row {
  display: inline-block;
  vertical-align: top;
}
.row-xl {
  width: 400px;
}
.row-lg {
  width: 240px;
}
.row-sm{
  width: 120px;
}
.element{
  border: 1px solid #000;
  margin-bottom: 10px;
}

.row .element {
  padding: 7px;
}