JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
	<li id="bac">
		<h2>Bac S</h2>
		<p>Spécialité physique/chimie, Lycée Lavoisier, Le Creusot.</p>
		<p>J'obtiens mon diplôme sans gloire : au rattrapage... Après avoir redoublé ma première et ma terminale.</p>
	</li><!--
  --><li id="fac">
		<h2>Faculté de biologie</h2>
		<p>Blablablabla</p>
		<p>BlablablablaBlablablablaBlablablablaBlablablablaBlablablablaBlablablablaBlablablabla</p>
	</li>
</ul>

CSS

ul {
	overflow:hidden;
	white-space:nowrap;
	padding:0;
	list-style:none;
	height:100px;
	font-family:sans-serif;
}
li {
	overflow:hidden;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display:inline-block;
	vertical-align:top;
	height:100%;
	padding-left:15px;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	color:#fff;
	background-image:linear-gradient(#9dbee9, #0b0f37);
	transition:all .5s .2s ease;
}


li:hover {
	width:100% !important;
	transition:all .5s ease;
}

h2 {
	font-size:1em;
}

p {
	margin:0;
	font-size:.8em;
	opacity:0;
	transition:opacity .4s ease;
}

li:hover p {
	opacity:1;
	transition:opacity .4s .3s ease;
}

#bac {
	width:80px;
}

#fac {
	width:180px;
}

#fac:hover {
	margin-left:-80px;
}