JSFiddle - React, Tailwind, and code Playground

HTML

<div id="timeline">
	<div class="item">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.</div>			
	<div class="item">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.</div>			
	<div class="item">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.</div>		
	<div class="item">Lorem ipsum ad his scripta blandit partiendo.</div>
	<div class="item">Lorem ipsum ad his scripta blandit partiendo.</div>
</div>

CSS

#timeline { margin-top: 20px; }
.item:nth-child(odd){ float:left; }
.item:nth-child(even){ float:right; }
        .item {
	width: 50%; height: auto;
	padding: 20px;
	float: left;	
	margin-bottom: 20px;
	text-align: justify;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}
.item:nth-child(even) { background: red; }
.item:nth-child(odd) { background: green; }