JSFiddle - React, Tailwind, and code Playground

by Joseph Marie

HTML

<body>
    
	<svg width="100px" height="200px" viewBox="0 0 50 100">
		<path id="halfcircleLeft" d="M 50 26 A 24 24 0 1 0 50 74 L 50 100 L 0 100 L 0 0 L 50 0 Z" style="fill: lightgray;"></path>
	</svg>
    
	<div class="svgLeftShape"></div>
	<div class="cssRightShape"></div>
	<p>It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body. It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body. It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body. It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body.</p>
	
</body>

CSS

.svgLeftShape{
  shape-outside: url(#halfcircleLeft);
  float: left;
  width: 100px;
  height: 200px;
}

.cssRightShape{
  shape-outside: circle(100px);
  float: right;
  width: 200px;
  height: 200px;
}

svg
{
  float: left;
}