JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<div class="row">
		<div class="latest_job col-s-12">
			<div class="titles_sect">
				<h1 class="title_sect">Dernières offres</h1>
				<span class="subtitle_sect">3 offres listés</span>
			</div>
			<div class="listing_jobs col-s-12">
				<div class="listed_job col-s-12">
					<div class="job_top col-s-12">
						<span class="job_contract uppercase primary col-s-4 col-m-2">Indeterminé</span>
						<h3 class="job_title col-s-12 col-m-6">UI-UX Designer for Mobile Applications</h3>
						<span class="job_location col-s-4 col-m-2"><i class="fa fa-map-marker"></i> Paris</span>
					</div>
					<div class="job_bot col-s-12">
						<h3 class="job_company col-s-3 col-m-6 col-m-push-2">DaronAd</h3>
						<span class="job_time col-s-3 col-m-2 col-m-push-2"><i class="fa fa-clock-o"></i> Il y a 2 heures</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

CSS

.latest_job{margin-top: 100px;}
.job_contract{font-size:0.9375rem;font-family: 'Source Sans Pro', sans-serif;font-weight: 400;}
.job_title, .job_location{
	font-size:1rem;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
	color: #808394
}
.job_company, .job_time{
	font-size:1rem;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
	color: #939698
}
.listing_jobs{margin-top: 20px;}
.listed_job{
	border-top: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
	padding: 20px;
}
.listed_job:hover{background:#ececec;}


@media only screen and (max-width: 970px) {
  .job_location,.jpb_company,.job_time,.job_title{position: absolute;float: left;}
  .job_title{width: 100%;float: left;clear: both;padding-top: 25px;margin-bottom: 15px;}
  .job_location{padding-left: 50px;}
  .job_time{float: left;margin-top: -26px;padding-left: 200px;width: 100%;}
  .job_company{float: right;margin-top: -26px;}
}/* ==|====================
   Layout/Grid
   ======================= */
.ratio{display:block;position:relative;width:100%;height:0;padding-bottom:56.66%}
.ratio img:first-child,.ratio iframe{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%}
.tcenter{text-align:center}
.tleft{text-align:left}
.tright{text-align:right}
.light{color:#9e9e9e}
.small{font-size:.8em;font-weight:400}
.vcenter{display:block;position:relative;top:50%;-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.danger{color:#c0392b}
.spacer{height:3em}
.pt{padding-top:2rem}
.pb{padding-bottom:2rem}
.left{float:left}
.right{float:right}
.cb{clear:both}
.relative{position:relative}
.hidden{display:none}
.rounded{border-radius:150px}
.uid{display:none}
.signed_in .hide-signed{display:none}
.grey{background-color:#f9f9f9}
.grey...