<style>
.container {
	width: 300px;
	height: 100px;
}

div {
	position: relative;
}

.float {
	background-color: blue;
}

.root {
	background-color: red;
}
</style>

<div class=container>
<div class=float style="width: 100px; height: 20px;"></div>
<div class=float style="top: -20px; left: 190px; width: 110px; height: 20px;"></div>
<div class=float style="top: -20px; width: 200px; height: 20px;"></div>
<div class=float style="top: -20px; left: 190px; width: 110px; height: 20px;"></div>
<div class=root  style="top: -80px; left: 100px; width: 90px; height: 20px;"></div>
</div>

<div class=container>
<div class=float style="width: 100px; height: 20px;"></div>
<div class=float style="top: -20px; left: 190px; width: 110px; height: 20px;"></div>
<div class=float style="top: -20px; width: 200px; height: 20px;"></div>
<div class=float style="top: -20px; left: 190px; width: 110px; height: 20px;"></div>
<div class=root  style="top: -60px; left: 200px; width: 100px; height: 20px;"></div>
</div>

<div class=container>
<div class=float style="width: 100px; height: 20px;"></div>
<div class=float style="top: -20px; left: 190px; width: 110px; height: 20px;"></div>
<div class=float style="top: -20px; width: 200px; height: 20px;"></div>
<div class=float style="top: -20px; left: 190px; width: 110px; height: 20px;"></div>
<div class=root  style="top: -40px; left: 0px; width: 190px; height: 20px;"></div>
</div>

<div class=container>
<div class=float style="width: 100px; height: 20px;"></div>
<div class=float style="top: -20px; left: 190px; width: 110px; height: 20px;"></div>
<div class=float style="top: -20px; width: 200px; height: 20px;"></div>
<div class=float style="top: -20px; left: 190px; width: 110px; height: 20px;"></div>
<div class=root  style="top: -20px; left: 0px; width: 300px; height: 20px;"></div>
</div>