Comment créer deux div côte à côte de la même hauteur en CSS

juillet 13, 2019février 10, 2020 Amine KOUIS Aucun commentaire

Avec CSS3, vous pouvez très facilement créer des colonnes ou des éléments <div> de la même hauteur alignés côte à côte. Il suffit d’appliquer la propriété display avec la valeur flex sur l’élément parent et la propriété flex avec la valeur 1 sur les sous-éléments, comme illustré sur l’exemple ci-dessous:

Code source :

<!DOCTYPE html>
<html>
	<head>
		<style>
			.row {
			  display: flex;
			}

			.col {
			  flex: 1; 
			  padding: 1em;
			  border: solid;
			}
		</style>
	</head>
	<body>
		<div class="row">
		  <div class="col">Lorem ipsum gravida vitae tristique a, porttitor sit amet enim.</div>
		  <div class="col">Donec auctor sodales nunc quis tristique. Pellentesque et sollicitudin nisl, sed blandit quam. Quisque tortor enim, blandit id congue eget, sagittis quis ligula. Aenean gravida sagittis ultrices. Duis in erat nec ligula laoreet faucibus.</div>
		</div>
	</body>
</html>

Résultat
Lorem ipsum gravida vitae tristique a, porttitor sit amet enim. Donec auctor sodales nunc quis tristique. Pellentesque et sollicitudin nisl, sed blandit quam. Quisque tortor enim, blandit id congue eget, sagittis quis ligula. Aenean gravida sagittis ultrices. Duis in erat nec ligula laoreet faucibus.