JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left p1"></div>
	<div class="right p1"></div>
	<div class="left p2"></div>
	<div class="right p2"></div>
	<div class="left p3"></div>
	<div class="right p3"></div>
	<div class="left p4"></div>
	<div class="right p4"></div>
	<div class="left p5"></div>
	<div class="right p5"></div>
	<div class="left p6"></div>
	<div class="right p6"></div>
	<div class="left p5"></div>
	<div class="right p5"></div>
	<div class="left p4"></div>
	<div class="right p4"></div>
	<div class="left p3"></div>
	<div class="right p3"></div>
	<div class="left p2"></div>
	<div class="right p2"></div>
	<div class="left p1"></div>
	<div class="right p1"></div>
	<p class="text">text text text text text-text text-text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>

CSS

.text {
	line-height: 20px;
}
.left {
	height: 20px;
	float: left;
	clear: left;
}
.right {
	height: 20px;
	float: right;
	clear: right;
}
.p1 {
	width: 100px;
}
.p2 {
	width: 80px;
}
.p3 {
	width: 60px;
}
.p4 {
	width: 40px;
}
.p5 {
	width: 20px;
}
.p6 {
	width: 0px;
}