JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/FitText.js/0b4183af/jquery.fittext.js"></script>


<div id="parent_of_word">
<p id="word">----------------</p>
</div>
<button id="give_me_a_name_please">Button</button>

CSS

#parent_of_word {
  width: auto;
	height: 20%;
	top: 10%;
	left: 10%;
	display: table;
	position: absolute;
	text-align: center;
	justify-content: center;
	line-height: 100%;
	border: 5px solid black;
  word-break: keep-all;
}

#word {
  display: block;
	color: brown;
	vertical-align: middle;
}

JavaScript

var words = ["Emily", "William Callum Smith Jr.", "Edwaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaard", "Bradley"];


var button1 = document.getElementById("give_me_a_name_please");


button1.addEventListener("click", function1);

function getRandomItem(array){
return array.splice(Math.floor(Math.random() * array.length), 1)[0];
}
   
function function1(){
var randomWord = getRandomItem(words); 
document.getElementById('word').innerHTML = randomWord;
}

$( '#give_me_a_name_please' ).click(function() { 
function resize () { $("#word").fitText(0.6); 
} 
});