JSFiddle - React, Tailwind, and code Playground

CSS grid

by Ankhena

HTML

<div class="grid">
  <div class="item item1"><b>1</b><br>(под высоту содержимого)</div>
  <div class="item item2"><b>3</b><br>(под высоту содержимого)</div>
  <div class="item item3"><b>2</b><br>(под высоту содержимого)<br>Lorem ipsum.<br></div>
</div>

CSS

* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.grid {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: repeat(2, minmax(0, min-content));
}

.item {
  background: #CD3036;
  border-radius: 3px;
}

.item1 {
  grid-column: 1;
  align-self: start;
}

.item2 {
  grid-column: 1;
  align-self: start;
}

.item3 {
  grid-row: 1 / 4;
  grid-column: 2;
  align-self: start;
}