JSFiddle - React, Tailwind, and code Playground

HTML

<div class="timeline-details"><div><span id="data-details"> Some information </span></div><div><span class="range-icon" style="background: green">ABC </span><span class="range-label">ABC1 </span><span class="range-time">testing 123 </span></div><div><span class="range-icon" style="background: blue">123 </span><span class="range-label">AFG5 </span><span class="range-time">testing 3 34 5 6</span></div><div><span class="range-icon" style="background: orange">UTY </span><span class="range-label">AFG </span><span class="range-time">blah blhab lha </span></div><div><span class="range-icon" style="background: blue">DIO </span><span class="range-label">DIO90 </span><span class="range-time">testing last </span></div></div>

CSS

.timeline-details {
	text-transform: uppercase;
	height: 80px;
	display: inline-block;
	border: 1px solid rgb(215, 215, 218);
    text-align: center;
}

.timeline-details div {
	display: inline-block;
	padding: none;
	margin: none;
	border-right: 1px solid rgb(215, 215, 218);
	height: 100%;
 }

.timeline-details span {
	position: relative;
 }

.timeline-details .range-icon {
	width: 40%;
	height: 100%;
	float: left;
	text-align: center
 }
.timeline-details .range-label {
	width: 60%;
	height: 50%;
	float: right;
	text-align: left
 }
.timeline-details .range-time {
	width: 60%;
	height: 50%;
	float: right;
	text-align: left
 }