JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
	<div class="circly"></div>
	<div class="text">
		I am lots of text. I should always be verticly centered to the middle of the circle.
	</div>
</div>

<div class="wrap">
	<div class="circly"></div>
	<div class="text">
		I am lots of text. I should always be verticly centered to the middle of the circle. I am lots of text. I should always be verticly centered to the middle of the circle.
	</div>
</div>


<div class="wrap">
	<div class="circly"></div>
	<div class="text">
		I am lots of text. I should always be verticly centered to the middle of the circle. I am lots of text. I should always be verticly centered to the middle of the circle. I am lots of text. I should always be verticly centered to the middle of the circle.
	</div>
</div>

CSS

.wrap {
	height: 220px;
	width: 400px;
}

.circly {
	background: red;
	height: 200px;
	width: 200px;
	border-radius: 50%;
	float: left;
	shape-outside: circle();
}

.text {

}