JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stuff">
    <h1>Pop Effect looks very
      <div class="popEffect">
        <span>Handsome.</span>
        <span>Clean.</span>
        <span>Elegant.</span>
        <span>Magnificent.</span>
        <span>Adorable.</span>
      </div>
    </h1>
  </div>

CSS

.stuff{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
h1{
	color: #000;
	font-size: 44px;
	margin-top: 40px;
  display: inline-block;
  white-space: nowrap;
}
/*Sentence*/
.sentence{
     color: #222;
     font-size: 30px;
     text-align: left;
}
/*Pop Effect*/
.popEffect{
	display: inline;
	text-indent: 8px;
}
.popEffect span{
	animation: pop 12.5s linear infinite 0s;
	-ms-animation: pop 12.5s linear infinite 0s;
	-webkit-animation: pop 12.5s linear infinite 0s;
	color: #00abe9;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.popEffect span:nth-child(2){
	animation-delay: 2.5s;
	-ms-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}
.popEffect span:nth-child(3){
	animation-delay: 5s;
	-ms-animation-delay: 5s;
	-webkit-animation-delay: 5s;
}
.popEffect span:nth-child(4){
	animation-delay: 7.5s;
	-ms-animation-delay: 7.5s;
	-webkit-animation-delay: 7.5s;
}
.popEffect span:nth-child(5){
	animation-delay: 10s;
	-ms-animation-delay: 10s;
	-webkit-animation-delay: 10s;
}
/*Pop Effect Animation*/
@-moz-keyframes pop{
	0% { opacity: 0; }
	5% { opacity: 0; -moz-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
	10% { opacity: 1; -moz-transform: translateY(0px); }
	25% { opacity: 1; -moz-transform: translateY(0px); }
	30% { opacity: 0; -moz-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0;}
}
@-webkit-keyframes pop{
	0% { opacity: 0; }
	5% { opacity: 0; -webkit-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px);}
	10% { opacity: 1; -webkit-transform: translateY(0px); }
	25% { opacity: 1; -webkit-transform: translateY(0px); }
	30% { opacity: 0; -webkit-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes pop{
	0% { opacity: 0; }
	5% { opacity: 0; -ms-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
	10% { opacity: 1; -ms-transform: translateY(0px); }
	25% { opacity: 1; -ms-transform: translateY(0px); }
	30% { opacity: 0; -ms-transform:...

JavaScript

$(document).ready(function(){var spans = $(".popEffect span"); //get all the "span" inside "popEffect"
var spansWidth = [];

spans.each(function(){
	spansWidth.splice(0,0,$(this).width());
});
//
  var largest = Math.max.apply(Math, spansWidth);//get the largest number
  $(".stuff").width($("h1").width() + largest);
});