JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="grid">
        <div class="grid-item grid-item1">item 1<br />
                item 1<br />
                item 1<br />
                item 1</div>

        <div class="grid-item grid-item2">item 2</div>

        <div class="grid-item grid-item3">item 3</div>
</div>

CSS

body {font: 18px Verdana sans-serif;}

.grid {
  display: grid;
 
  /* выставим фикс. ширину контейнеру */
  width: 100%;
  
  /* применим для всех колонок фракции гибкости */
  grid-template-columns: 1fr 2fr 3fr;
}

.grid-item1 {
  background: #ffcccc;
}
.grid-item2 {
  background: #ccffcc;
}
.grid-item3 {
  background: #ccccff;
}