<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; }
}
This Pen doesn't use any external JavaScript resources.