JSFiddle - React, Tailwind, and code Playground

HTML

<div id='apple' ></div>
<div id='banana'></div>
<div id='cherry'></div>

CSS

#apple, #banana, #cherry {
    text-align: center ;
}

JavaScript

var adjs = {};

var populateWordArray = function(){
    adjs[1] = ['tall', 'big', 'nice', 'wide', 'quick', 'gorged', 'wasted'];
    adjs[2] = ['orange', 'lively', 'rancid', 'zany', 'dainty', 'bulbous', 'tepid'];
    adjs[3] = ['exotic', 'fanciful', 'yodeling', 'pragmatic', 'jocular'];
    adjs[4] = ['gregarious', 'harmonious', 'miraculous', 'voluptuous', 'antiquated'];
    adjs[5] = ['irresponsible', 'kaleidoscopic', 'unacceptable', 'coordinated', 'capability', 'sophistocated'];
};
populateWordArray();

function getWord(syllableCount) {
    var remainingWords = adjs[syllableCount].length;
    var wordIndex = Math.floor(remainingWords * Math.random());
    var word = adjs[syllableCount][wordIndex]; 
    adjs[syllableCount].splice(wordIndex, 1);
    return word;
}

var doLine = function( spanId, length ){
    var text = '';    
    var chars = 0;
    while( chars < length){
        var a = 1 + Math.floor((length-chars) * Math.random());
        while( !adjs[a] || adjs[a].length < 1 ){
            a = 1 + Math.floor((length-chars) * Math.random());
        }
        var word = getWord( a );
        text += word + ' ';
        chars += a;
        
    }
    document.getElementById(spanId).innerText = text;
};
/* --------------------------------------------------------------------------------------- */                                    

doLine('apple', 5);
doLine('banana', 7);
doLine('cherry', 5);