JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sl-slider" data-midnight="white">

  slider

</div><!-- /sl-slider -->

<section class="grid">
  <h1 class="item text-content">Titre
    Titre
    Titre</h1>
  <p class="item text-content">Texte</p>
  <div class="item illustration">Illus.</div>
</section>

CSS

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

.sl-slider {
  height: 100%;
  border: solid 1px red;
}

.grid {
  position: relative;
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: repeat(12, 1fr);
  height: 100%;
}

.item {
  padding: 1.5rem;
  background-color: coral;
}

.text-content {
  grid-column: 1 / 9;
}

.illustration {
  position: absolute;
  grid-column: span 4 / -1;
  grid-row: 1 / 3;
  left: 0; 
  top: 0;
  right: 0;
  bottom: 0;
}