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>Mise en page grille</title>
		<style>
			body {
				padding: 50px;
			}
			#conteneur {
				/* Grille de mise en page */
				display: grid;
				grid-template-columns: 50% 50%; /* [50% 50% affiche 2 colonnes et 3 lignes] [33.33% 33.33% 33.33%;   Affiche 3 colonnes et 2 lignes] */
				/* Mise en forme */
				width: 600px;
				border: 1px solid #000;
				padding: 5px;
			}
			p {
				margin: 0;
			}
		</style>
	</head>
	<body>
		<div id="conteneur">	<!-- Conteneur de grille --> 
			<p><b>Un</b>. Les six paragraphes suivants sont des enfants directs(items). Ces six éléments constituent la grille.</p>
			<p><b>Deux</b>. Pour définir le conteneur de grille, il sufiit de lui appliquer la proprièté display avec la valeur grid.</p>
			<p><b>Trois</b>. Le nombre et la largeur des pistes vont se déterminer avec la proprièté grid-template-columns.</p>
			<p><b>Quatre</b>. Nulla vitae elit libero, a pharetra augue. Adipiscing venenatis mattis vehicula sem. quam ommodo lit.</p>
			<p><b>Cinq</b>. Cras Parturient Dolor Magna. Vestibulum id ligula porta felis euismod semper. Parturient Pellentesque Porta Euismod.</p>
			<p><b>Six</b>. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Vestibulum Ornare Consectetur.</p>
		</div>
	</body>
</html>