JSFiddle - React, Tailwind, and code Playground

by Drath

HTML

<div class="👏">
   <div class="👏👏👏">Thing of the Things</div>
</div>

<div class="👏">
   <div class="👏👏👏">Thing</div>
</div>

<div class="👏">
   <div class="👏👏👏">Thing of the Things of Things</div>
</div>

<div class="👏">
   <div class="👏👏👏">Thing of the 
Things</div>
</div>

CSS

.👏 {
  width: 400px;
  background: grey;
  padding: 20px 64px;
  text-align: center;
  margin: 10px;
  float: left;
  position: relative;
}

.👏👏👏 {
  display: inline;
  white-space: pre-wrap;
  font-size: 48px;
}

.👏👏👏::before {
  display: block;
  width: 32px;
  height: 32px;
  content: "";
  background: red;
  position: absolute;
  top: 50%;
  width: 100%;
	transform: translate(0, -50%);
}