JSFiddle - React, Tailwind, and code Playground

HTML

<div id="listing_header">
    <a href="#">
        <span class="float_left w216px">
            Colonne 1
        </span>
        <span class="float_left w74px">
            Colonne 2
        </span>
        <span class="float_left w82px">
            Colonne 3 Multi-lignes
        </span>
    </a>
</div>

CSS

#listing_header {
	background-color: #fff;
}
#listing_header > a {
	display: block;
	height: 48px;
	line-height: 48px;
}
#listing_header > a > span {
	background-color: #aaa;
	color: #fff;
	/* display: block; */
	height: 48px;
	display: inline-block;
	line-height: normal;
	font-size: 12px;
	font-weight: bold;
	margin: 0 0 0 1px;
	/* padding: 0; */
	text-align: center;
	vertical-align: middle;
}
#listing_header > a > span:first-child {
	margin-left: 0;
}
.w216px {
	width: 216px;
}
.w74px {
	width: 74px;
}
.w82px {
	width: 82px;
}
.float_left {
	float: left;
}