JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circle">
	<div class="text">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, quisquam, mollitia, dolores sit accusamus molestiae necessitatibus rerum nisi natus itaque amet maiores tempore veniam qui aut ullam odio magnam quidem!
	</div>
</div>
<div class="circle small">
	<div class="text">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, quisquam, mollitia, dolores sit accusamus molestiae necessitatibus rerum nisi natus itaque amet maiores tempore veniam qui aut ullam odio magnam quidem!
	</div>
</div>
<div class="circle big">
	<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, a, quasi esse neque ab ratione maiores rem eveniet dolorem quo quia similique laborum recusandae delectus est tempore cumque ex quidem!</div>
</div>

CSS

.circle {
		background: #ddd;
		border: 1px solid #ccc;
		width: 200px;
		height: 200px;
		border-radius: 100%;
	}
	.circle .text {
		border: 1px solid #bbb;
		background: #fff;
		font-size: 16px;
		/* This box sizing is necessary for inner calculations */
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding: 5px;
	}
	.circle.small {
		width: 50px;
		height: 50px;
	}
	.circle.big {
		width: 400px;
		height: 400px;
	}

JavaScript

$(document).ready(function() {
	$('.circle').each(function() {
		//Get the container and inner text
		var circle = $(this),
		text = $(this).find('>.text');


		//Get some variables
		var height = circle.height(),
		width = circle.width(),
		radius = 0,
		sideLength = 0,
		margin = 0,
		fontSize = 0;

		//Fix it if necessary
		if(height !== width) {
			radius = Math.round(parseFloat(Math.max(height, width) / 2, 10));
			circle.height(radius * 2).width(radius * 2);
		} else {
			radius = Math.round(height / 2);
		}

		//Now calculate a square box inside the circle to put the text into
		//This is pure maths
		//The diagonal of the square is basically two times of the radius
		//Which means side is approximately radius * 1.4142
		sideLength = Math.round(radius * 1.4142);

		//Thus calculate the margin
		margin = ( height - sideLength ) / 2;

		//Assign the width
		text.css('width', sideLength);

		//Assign the margin
		text.css({
			'margin-left' : margin,
			'margin-top' : margin
		});

		//lets center the text if it's height is less than sideLenght
		if(text.height() < sideLength) {
			var newMarginTop = (height - text.height()) / 2;
			text.css('margin-top', newMarginTop);
		} else if(text.height() > sideLength) { //Or adjust the font
			//Now keep on decreasing the font until the height of the text becomes
			//less than or equal to the calculated size
			while(text.height() > sideLength) {
				fontSize = parseInt(text.css('font-size'), 10);
				text.css('font-size', --fontSize);
			}
		}
	});
});