JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="item item-2-2">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga quibusdam veniam delectus quae sequi ad cum, necessitatibus aliquam similique, provident deserunt soluta magni magnam modi accusantium amet ea sit saepe.</p>
    </div>
    <div class="item item-2-1">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga quibusdam veniam delectus quae sequi ad cum, necessitatibus aliquam similique, provident deserunt soluta magni magnam modi accusantium amet ea sit saepe.</p>
    </div>
    <div class="item">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga quibusdam veniam delectus quae sequi ad cum, necessitatibus aliquam similique, provident deserunt soluta magni magnam modi accusantium amet ea sit saepe.</p>
    </div>
    <div class="item">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga quibusdam veniam delectus quae sequi ad cum, necessitatibus aliquam similique, provident deserunt soluta magni magnam modi accusantium amet ea sit saepe.</p>
    </div>
</div>

CSS

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}
body {
  margin: 0;
}

.wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-gap: 3px;
}
.item {
  background: #dadada;
}
.item-2-2 {
  grid-column: span 2;
  grid-row: span 2;
}
.item-2-1 {
  grid-column: span 2;
}