JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">

  <div class="item item-b"></div>
  <div class="item item-m"></div>
  <div class="item item-m"></div>

</div>

CSS

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.block {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(100px, min-content);
  gap: 20px;
  width: 60%;
  margin: 30px auto;
}

.item {
  border: 1px solid #aaa;
  border-radius: 8px;
  background: #eee;
}
.item-b {
  grid-row: span 2; 
}