JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<title>Alignement enfants dans grille P 217 F et G</title>
	<style>
		body {
			padding: 50px;
		}
	
  #conteneur1 {
    /* Grille de mise en page */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  	height: 80px;
    gap: 10px; 
    /* Mise en forme */
    width: 920px;
	  padding: 10px; 
	  margin-bottom: 15px;
    border: 1px solid #000;
    border-radius: 3px;
	  background-color: lightblue;
  }
  p {
    margin: 0;
    border: 1px solid #000;
    border-radius: 3px;
	  background-color: lightgreen;
  }
  #conteneur2, #conteneur4, #conteneur6 {
    display: grid;
    grid-template-columns: 940px;
 	  margin-bottom: 15px; 
    font-size: 1.2em;
    }
  #conteneur3	{
	 /* Grille de mise en page */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
	  height: 80px;
    gap: 10px; 
 	  justify-items: start;
    /* Mise en forme */
    width: 920px;
	  padding: 10px; 
	  margin-bottom: 20px; 
    border: 1px solid #000;
    border-radius: 3px;
	  background-color: lightblue;
  }
  #conteneur5 {
	 /* Grille de mise en page */
    display: grid;
    grid-template-columns: repeat(3,300px);
	  height: 80px;
    gap: 10px; 
	  justify-items: center;
    /* Mise en forme */
    width: 920px;
	  padding: 10px; 
	  margin-top: 20px; 
    border: 1px solid #000;
    border-radius: 3px;
	  background-color: lightblue;
	}
	</style>
</head>
<body>
<div id="conteneur1">
	<p>
		<b>UN</b>. <mark>CONT1.</mark> Bonjour, comment ça va ? 
	</p>
	<p>
		<b>DEUX</b>. Je vais bien merci.
	</p>
	<p>
		<b>TROIS</b>. Alors, c'est parfait.
	</p>
	<p>
		<b>QUATRE</b>. Que fais-tu de beau ?
	</p>
	<p>
		<b>CINQ</b>. Pas grand-chose, je glandouille.
	</p>
	<p>
		<b>SIX</b>. Tu ne t'ennuies pas ?
	</p>
	<p>
		<b>SEPT</b>. Non, un rien m'occupe.
	</p>
	<p>
		<b>HUIT</b>. Tu as de la chance.
	</p>
	<p>
		<b>NEUF</b>. Fais en...