JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<div class="container">
  <div class="col-gauche">
  <div id="bloc0">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at sapien eget velit facilisis mattis. Donec sagittis metus at metus mattis, eget venenatis massa ullamcorper. Sed blandit justo magna, ac hendrerit ante egestas in. Maecenas risus felis, lacinia a ultrices non, aliquam luctus purus. Aenean in varius ex. Nunc venenatis fermentum convallis. Integer eu ultricies orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at sapien eget velit facilisis mattis. Donec sagittis metus at metus mattis, eget venenatis massa ullamcorper. Sed blandit justo magna, ac hendrerit ante egestas in. Maecenas risus felis, lacinia a ultrices non, aliquam luctus purus. Aenean in varius ex. Nunc venenatis fermentum convallis. Integer eu ultricies orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at sapien eget velit facilisis mattis. Donec sagittis metus at metus mattis, eget venenatis massa ullamcorper. Sed blandit justo magna, ac hendrerit ante egestas in. Maecenas risus felis, lacinia a ultrices non, aliquam luctus purus. Aenean in varius ex. Nunc venenatis fermentum convallis. Integer eu ultricies orci.</div>
  <div id="telechargement">TÉLÉCHARGEMENT 500x100</div>
  </div><!--col-gauche-->
  <div class="col-droite">
  <div id="bloc1"><img src="500x100.png" width="500" height="100"></div> <div id="bloc2"><img src="500x100.png" width="500" height="100" style="margin-top:10px;"></div><div id="bloc3"><img src="500x250.png" width="500" height="250" style="margin-top:10px;"></div></div><!--col-droite-->
</div><!--container-->

CSS

.container {
	background-color: #0F0;
	width: 1010px;
	margin-right: auto;
	margin-left: auto;
	/*font-size:0;*/
}
.col-gauche {
	/*display: inline-block;*/
	width: 500px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	color: #000;
	float: left;
}

.col-droite {
	background-color: #FF0;
	/*display: inline-block;*/
	margin-left: 10px;
	width: 500px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 0.750em;
	color: #000;
	float: left;
}

#telechargement {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #FFF;
	background-color: #F00;
	height: 100px;
	width: 500px;
	position: relative;
}

/* RAJOUTS */

#bloc0 {
  min-height: 220px; /* 100px + 10px + 100px + 10px*/
}
#bloc1,
#bloc2,
#bloc3 {
  line-height:0; /* fix du bug d'espace insecable avec les img*/
}