<div id="wrapper">A circle is a shape consisting of all points in a plane that are a given distance from a given point, the centre; <span class="circle"></span>equivalently it is the curve traced out by a point that moves in a plane so that its distance from a given point is constant. The distance between any point of the circle and <span class="circle"></span> the centre is called the radius. This article is about circles in Euclidean geometry, and, in particular, the Euclidean plane, except where otherwise noted. </div>
.circle {
	background-color: red;
	border-radius: 50%;
	float: left;
	margin: 5px 5px 5px 0;
	shape-outside: circle(50%);
	width: 50px; height: 50px;
}
.circle:nth-of-type(2){
	float: right;
	margin: 5px 0 5px 5px;
}
#wrapper {
	margin: auto; 
	margin-top: calc(50vh - 150px);
	text-align: justify;
	width: 280px; height: 300px;
}
body { font-family: "Sorts mill goudy"; }

@supports(-webkit-app-region: none){ /* Chrome */
	.circle{margin-top: calc(1em + 5px) !important; }
}

External CSS

  1. https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:[email protected];1&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.