JSFiddle - React, Tailwind, and code Playground

by Kirill Belyaev

HTML

<div>
<div class="general-const"><p>This is a rare case of both old logos being pretty good and not necessarily needing an update except for the acquisition of Telerik by Progress driving the need for a change. The new logo is on par with both of the old logos. It's pretty good. Nothing earth-shattering nor revelatory. The icon has a double read as a series of growing arrows/chevrons but also as a kind of nested-cube-Russian-doll that is perhaps unintentional given how the logo is reproduced as a sculpture.</p></div>
<div class="general-calc"><p>This is a rare case of both old logos being pretty good and not necessarily needing an update except for the acquisition of Telerik by Progress driving the need for a change. The new logo is on par with both of the old logos. It's pretty good. Nothing earth-shattering nor revelatory. The icon has a double read as a series of growing arrows/chevrons but also as a kind of nested-cube-Russian-doll that is perhaps unintentional given how the logo is reproduced as a sculpture.</p></div>
<div class="general-plot"><p>This is a rare case of both old logos being pretty good and not necessarily needing an update except for the acquisition of Telerik by Progress driving the need for a change. The new logo is on par with both of the old logos. It's pretty good. Nothing earth-shattering nor revelatory. The icon has a double read as a series of growing arrows/chevrons but also as a kind of nested-cube-Russian-doll that is perhaps unintentional given how the logo is reproduced as a sculpture.</p></div>
</div>

CSS

body {margin: 0;}
div {height: 200px; box-sizing: border-box; margin: 0; -webkit-margin-start:0;-webkit-margin-end:0;-webkit-margin-before:0;-webkit-margin-after:0;}

.general-const {
width: 33%;
padding: 0 2% 0 3.2%;
float: left;
background-color: red;
}

.general-calc {
width: 33%;
padding: 0 2%;
float: left;
background-color: green;
}

.general-plot {
width: 34%;
padding: 0 2%;
float: left;
background-color: orange;
}

@media screen and (max-width: 1200px) {
.general-const {width: 100%; float: none;}
.general-calc {width: 50%; padding: 0 2% 0 3.2%;}
.general-plot {width: 50%;}
}