JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<div class="parent">
  <div class="div1">
    <p class="red">111</p>
    <div>text</div>
  </div>
  <div class="div2">
    <p class="bleu">222</p>
    <div>text</div>
  </div>
  <div class="div3">
    <p class="gray">333</p>
    <div>text</div>
  </div>
</div>

CSS

.parent {
display: grid;
grid-template-columns: 1fr 4fr repeat(2, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 1 / 6 / 2; }
.div2 { grid-area: 1 / 2 / 6 / 3; }
.div3 { grid-area: 1 / 3 / 6 / 5; }

.red{background-color:red}
.bleu{background-color:blue}
.gray{background-color:gray}