JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="single-block red">texts</div>
    <div class="single-block green"></div>
    <div class="single-block red">texts</div>
    <div class="single-block green"></div>
    <div class="single-block red">texts</div>
</div>

CSS

.wrapper{
    width: 600px; 
    height: 30px;
    white-space: nowrap;
    font-size:0;
}
.single-block{
   width:20px;
   height:100%;
   vertical-align:bottom;
    font-size:16px;
}
.red{
    background-color:red;
    position:relative;
}
.green{
    background-color:green;
}