JSFiddle - React, Tailwind, and code Playground

by Artem Borovikov

HTML

<div class="wrapper">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

CSS

.wrapper {
    -ms-display: grid;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 4fr 1fr 2fr;
}

.item {
    padding: 5px;
    background: green;
}

.item:nth-child(1) {
    grid-row-start: span 2;
}

.item:nth-child(4) {
    grid-column-start: span 2;
}