DEMO
using inline-block
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%;
display:inline-block;
vertical-align:bottom;
font-size:16px;
}
.red{
background-color:red;
position:relative;
}
.green{
background-color:green;
}