JSFiddle - React, Tailwind, and code Playground

by Petra1999

HTML

<div class="category-overview__row--tall">
  <div class="category-overview__box--width-wide" >w</div>
  <div class="category-overview__box--width-default" >d1</div>
  <div class="category-overview__box--width-default" >d2</div>
</div>

SCSS

.category-overview__row--tall {
  width: 100%;
  height: 300px;
  display: grid;
  grid-gap: 20px;
  grid-template: "category-overview-big-box category-overview-small-box-1" auto "category-overview-big-box category-overview-small-box-2" auto / 2fr 327px;

  .category-overview__box--width-wide {
    grid-area: category-overview-big-box;
  }

  .category-overview__box--width-default {
    &:nth-of-type(2) {
      grid-area: category-overview-small-box-1;
    }

    &:nth-of-type(3) {
      grid-area: category-overview-small-box-2;
    }
  }
}