JSFiddle - React, Tailwind, and code Playground

HTML

<div id="head-Circles">
		<div class="circle">E</div>
		<div class="circle">X</div>
		<div class="circle">C</div>
		<div class="circle">E</div>
		<div class="circle">P</div>
		<div class="circle">T</div>
		<div class="circle">I</div>
		<div class="circle">O</div>
		<div class="circle">N</div>
		<div class="circle">A</div>
		<div class="circle">L</div>
		<div class="circle">I</div>
		<div class="circle">S</div>
		<div class="circle">H</div>

		<div class="clearfix"></div>
	</div>

CSS

.clearfix {
  clear: both;
}

#head-Circles {
  width: 575px;
  min-height: 1px;
}

.circle {
	float: left;
	text-align: center;
	border-radius: 50%;
	display: flex;
  align-items: center;
  justify-content: center;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 15px;
	color: rgba(238, 238, 238, 1);
}

.circle:nth-child(odd) {
	background-color: rgba(255, 45, 45, 0.5);
}

.circle:nth-child(even) {
	background-color: rgba(45, 45, 255, 0.5);
}

JavaScript

function relCircleSize(circles, containerWidth) {
console.log('it ran');
	// Calculate width of each circle
	var circleWidth = containerWidth / ((.7 * (circles.length - 1)) + 1);
	var widthRem = circleWidth % 1;
	var pixelWidth = (circleWidth - widthRem);
	var circleMargin = pixelWidth * .3;
	var marginRem = circleMargin % 1;
	var pixelMargin = (circleMargin - marginRem);

	var extraWidth = 0;
	var extraMargin = 0;
	var totalWidth = 0;
	var totalMargin = 0;
	var smalls = [];
	var count = 0;

	circles.each(function(index) {
		extraWidth += widthRem;
		extraMargin += marginRem;

		if (extraWidth < .5 && extraMargin < .5) {
			$(this).css({
				'width' : pixelWidth + "px",
				'height' : pixelWidth + "px",
				'margin-left' : "-" + pixelMargin + "px"
			});
			totalWidth += pixelWidth;
			if (index != 0) {
				totalMargin += pixelMargin;
			}
			smalls[count] = this;
			count += 1;
		}
		else if (extraWidth > .5 && extraMargin > .5) {
			$(this).css({
				'width' : (pixelWidth + 1) + "px",
				'height' : pixelWidth + "px",
				'margin-left' : "-" + (pixelMargin + 1) + "px"
			});
			extraWidth -= 1;
			extraMargin -= 1;
			totalWidth += (pixelWidth + 1);
			if (index != 0) {
				totalMargin += (pixelMargin + 1);
			}
		}
		else if (extraWidth > .5) {
			$(this).css({
				'width' : (pixelWidth + 1) + "px",
				'height' : pixelWidth + "px",
				'margin-left' : "-" + (pixelMargin + 1) + "px"
			});
			extraWidth -= 1;
			totalWidth += (pixelWidth + 1);
			if (index != 0) {
				totalMargin += pixelMargin;
			}
		}
		else if (extraMargin > .5) {
			$(this).css({
				'width' : pixelWidth + "px",
				'height' : pixelWidth + "px",
				'margin-left' : "-" + (pixelMargin + 1) + "px"
			});
			extraMargin -= 1;
			totalWidth += pixelWidth;
			if (index != 0) {
				totalMargin += (pixelMargin + 1);
			}
			smalls[count] = this;
			count += 1;
		}
	});

	$(circles[0]).css({
		'margin-left' : 0
	});
}

relCircleSize($('.circle'),...