JSFiddle - React, Tailwind, and code Playground

HTML

<div class="article">
<div class="titre">
Titre de l'article
</div>
<figure><img src="https://spaces-cdn.clipsafari.com/3789mpsthl0kgcdwc1rhn0amp0o3"></figure>
<p class="texte">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae similitudo in genere etiam humano apparet. Neque solum ea communia, verum etiam paria esse dixerunt. Ea possunt paria non esse. </p>
</div>

CSS

.article {
	display: grid;
	grid-template-columns: 200px 500px;
	grid-template-rows: 50px auto;
  box-shadow: 0 50px 0 0 #143c17 inset;
}

figure { grid-column: 1; grid-row: 1;}
.titre { grid-column: 2; grid-row: 1;}
.fond-titre { grid-column: 1 / span 2; grid-row: 1; }
.texte { grid-column: 1 / span 2; grid-row: 2; }

.titre {
  font-size:2rem;
  color:#fff;
  text-align:center;
}

.titre,
figure {z-index:100;}

.texte {margin-top:100px;}