JSFiddle - React, Tailwind, and code Playground

HTML

<p id="sentence">This is a sentence that has <span id="what">dynamic</span> text that alters width.</p>

CSS

#sentence{
    transition:1.5s all linear;
}
#what{
    font-style:italic;
    text-decoration:underline;
    color:red;
}

JavaScript

$(function  (){
    var hello = ['dynamic', 'a','aklsjdlfajklsdlkf','asdf'];
    var used = ['dynamic'];
    var greeting = $('#what');
    var item; 

function hey() {
    	
        item = hello[Math.floor(Math.random() * hello.length)];
        if (hello.length != used.length) {
            while (jQuery.inArray(item, used) != -1) {
                item = hello[Math.floor(Math.random() * hello.length)];
            }
            used.push(item);
        } 
        else {
            used.length = 0;
            item = hello[Math.floor(Math.random() * hello.length)];
            used.push(item);
        }
        greeting.html(item);
        greeting.animate({
            "opacity": "1"
        }, 1500);
    }

    window.setInterval(function () {
        greeting.animate({
            "opacity": "0"
        }, 1500);
        setTimeout(hey, 1500)
    }, 5000);

});