JSFiddle - React, Tailwind, and code Playground

HTML

<div class="clearfix">							
	<div class="outer-div">
		<div class="inner-div">
			<div class="floating-div">Float 1</div>
			<div class="floating-div">Float 2</div>
			<div class="floating-div">Float 3</div>
		</div>
	</div>
</div>

CSS

.outer-div { position: relative; float: right; right: 50%; }
.inner-div { position: relative; float: right; right: -50%; }
.floating-div { float: left; margin: 0 1.5em; border: 1px solid red;  }
    
.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }