JSFiddle - React, Tailwind, and code Playground

HTML

<div class="topbar">
	<div class="title">Title</div>

	<div class="topbar-boxes-left">
			<div class="topbar-box">Box1</div>
			<div class="topbar-box">Box2</div>
			<div class="topbar-box">Box3</div>
		</div>
		
		<div class="topbar-boxes-right">
			<div class="topbar-box">Box1</div>
			<div class="topbar-box">Box2</div>
			<div class="topbar-box">Box3</div>
		</div>
	

	<div style="clear:both"></div>
</div>

CSS

.topbar {
	width: 100%;

	padding: 14px;

	font-size: 18pt;
	color: white;

	background-color: rgba(42, 42, 42, 0.95);
}

.title {
	float: left;
	padding-right: 50px;
}


.topbar-boxes-left {
    
    margin: -14px;
    float: left;    
}

.topbar-boxes-right {
    
    margin: -14px;
    float: right;
}

.topbar-box {
	float: left;

	padding: 20px;

	border-left: 1px solid black;

}