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: inline-block;
	height: 48px;
	line-height: 48px;
    background-color: #aaa;
    text-decoration:none;
    position:relative;
}
#listing_header > a > span {
	color: #fff;
	display: inline-block;
	line-height: 1.2em;;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}

.w216px {
	width: 216px;
}
.w74px {
	width: 74px;
}
.w82px {
	width: 82px;
}
a span:before {
    content:'';
    display:block;
    border-left:3px solid white;
    position:absolute;
    top:0;
    bottom:0;
    margin-left:-3px;
}