JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <center>
        <h1>Result:</h1>
        <div id='outer1' align='center'>
            <span style='float:left;'>This is</span>
            <span id="changingtext1">changing</span>
            <span style='float:right;'>text</span>
        </div>
        <br />
        <span id='next1'></span>
        </center>
        <br /><br />
        <h1>what is happening:</h1>
        <div id='outer' align='center'>
            <span style='float:left; background-color:blue;'>This is</span>
            <span id="changingtext">changing</span>
            <span style='float:right; background-color:green;'>text</span>
        </div>
        <br />
        <span id='next' style='background-color:pink;'></span>
    </body>

CSS

#outer,
#outer1,
#changingtext1,
#changingtext
{
    padding:0;
    margin:0;
    font-size: 40px;
     font-weight: bold;
     font-family: helvetica, arial, sans-serif;
}
#changingtext
{
     background-color:red;
}
#outer
    { 
    background-color:yellow;
    }
#next,
#next1{
    padding:0;
    margin:0;
      font-size: 40px;
     font-weight: bold;
    font-family: helvetica, arial, sans-serif;  
}

JavaScript

//result:
var words1 = new Array(  "dynamic", "changing", "cool");
 var i1 = 0;
$("#next1").text($("#outer1").text()).hide();
$("#outer1").width($("#next1").width());

 var tid1 = setInterval(
     function() { 
         var word_in1;
         if (typeof  words1[i1+1] !='undefined') { word_in1 = words1[i1+1] } else { word_in1 = words1[0]; }
        var by_char_next1 = $("#next1").text('This is '+ word_in1 + ' text').width();
         $("#changingtext1").fadeOut(1000, function(){
             $("#outer1").animate({'width': by_char_next1 },1000,function(){
             $("#changingtext1").text(words1[i1]).fadeIn(1000);
             });
         });
        if (i1 < words1.length-1) i1++;
        else i1 = 0;
     }, 3000 );




//what is happening:
var words = new Array(  "dynamic", "changing", "cool");
 var i = 0;
$("#next").text($("#outer").text());
$("#outer").width($("#next").width());
 var tid = setInterval(
     function() { 
         var word_in;
         if (typeof  words[i+1] !='undefined') { word_in = words[i+1] } else { word_in = words[0]; }
        var by_char_next = $("#next").text('This is '+ word_in + ' text').width();
         $("#changingtext").fadeOut(1000, function(){
             $("#outer").animate({'width': by_char_next},1000,function(){
             $("#changingtext").text(words[i]).fadeIn(1000);
             });
         });
        if (i < words.length-1) i++;
        else i = 0;
     }, 3000 );