JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="band">
	  <div class="activity-block fl" style="margin-left: 331px; width: 81px;">1</div>
	  <div class="activity-block fr" style="margin-right: 160px; width: 497px;">2</div>
	</div>
	<div class="band">
	  <div class="activity-block fl" style="margin-left: 205px; width: 22px;">3</div>
	  <div class="activity-block fr" style="margin-right: 365px; width: 417px;">4</div>
	</div>
</body>

CSS

.activity-block {
			background-color: #66C6C2;
			border-radius: 3px;
			height: 20px;
			margin-bottom: 5px;
			margin-top: 5px;
		}
		.band {
			min-height: 30px;
			border: solid 1px;
			width: 1050px;
			float: left;
		}
		.fl {
			float: left;
		}
		.fr {
			float: right;
		}