JSFiddle - React, Tailwind, and code Playground

HTML

<div id="xAxisLabels" class="flexrow">
				<h5 class="flexitem xAxis">1</h5>
				<h5 class="flexitem xAxis">2</h5>
				<h5 class="flexitem xAxis">3</h5>
				<h5 class="flexitem xAxis">4</h5>
				<h5 class="flexitem xAxis">5</h5>
				<h5 class="flexitem xAxis">6</h5>
				<h5 class="flexitem xAxis">7</h5>
			</div>

CSS

.flexitem {
	flex:1;
	display: flex;
}

.flexrow {
	position: relative;
	flex-flow: row nowrap;
	display: flex;
}

.xAxis {
	max-width: 100%;
	width: 100%;
}

JavaScript

$( document ).ready( function() {
	var labelChildren = $('#xAxisLabels').children().length
	var halfway = labelChildren/2
	var counter = 1
	$('#xAxisLabels').children().each(function (){
		var child = $(this)
		if(counter == 1){
			child.css("text-align", "left");
		}
		else if(counter > 1 & counter < halfway){
			child.css("text-align", "left");
			child.css("text-indent", (((100/labelChildren)*counter)-(counter*9))+"%");
		}
		else if(counter == halfway){
			child.css("text-align", "center");
			child.css("justify-content", "center");
		}
		else if(counter == (halfway+.5) ){
			child.css("text-align", "center");
			child.css("justify-content", "center");
		}
		else if(counter > halfway & counter < labelChildren){
			child.css("text-align", "right");
			child.css("direction", "rtl");
			child.css("text-indent", (((100/labelChildren)*(counter%halfway))-((counter%halfway)*9))+"%");
		}
		else if (counter == labelChildren){
			child.css("text-align", "right");
			child.css("justify-content", "right");
			child.css("display", "block");
		}
		counter += 1
	});
});