JSFiddle - React, Tailwind, and code Playground

by rsolomonjr1

HTML

<div class="zone_33">
	<div class="bloc_dossier">
		<div class="dossier_titre">
    <h2><span>Horizon 2020, nouvelles opportunités here's more text that<br>will break it up</span>span</h2>
		</div>
		<div class="dossier_visuel">
			<a href="#">
				<img src="http://placehold.it/238x159.jpg" alt="Horizon 2020, nouvelles opportunités">
			</a>
		</div>
		<div class="dossier_description">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tincidunt erat in purus ullamcorper ultricies.</p>
		</div>
		<ul class="dossier_contenus">
			<li class="last">
				<a href="#">Lorem ipsum</a>
			</li>
		</ul>
	</div>
</div>

CSS

body {
    color: #616263;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
}

.zone_33 {
	width: 238px;
	padding: 0px;
	margin: 0px;
	float: left;
	min-height: 1px;

}

.zone_33 h2 {
	color: #616263;
	font-size: 150%;
	font-weight: lighter;
	padding: 0px 0px 12px 0px;
	background: none;
	margin: 0px 0px 20px 0px;
	display: inline-block;
	text-transform: uppercase;
    position:relative
}
h2 span {position:relative;padding-bottom : 5px;}
h2 span:after{position:absolute; left:0; bottom:0; width:100%; height:1px; border-bottom:1px solid #000; content:""}