JSFiddle - React, Tailwind, and code Playground

HTML

<div>Circles</div>
<div>that</div>
<div>expand</div>
<div>with</div>
<div>content</div>
<br>
<div contenteditable>Try it out now! TYPE HERE...</div>

CSS

div {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #555;
  color: yellow;
  min-width: 1em;
  border-radius: 50%;
  vertical-align: middle;
}

div:before {
  content:'';
  float: left;
  width: auto;
  padding-bottom: 100%;
}