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;
}

figure {
  grid-column: 1;
  grid-row: 1;
  background: #143c17;
  margin: 0;
  padding: 20px 40px 0;
}
.titre {
  grid-column: 2;
  grid-row: 1;
  background: #143c17;
}
.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;}