JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
<p class="word">
Hello
</p>
<p>
<span class="span">
  Boris
</span>
</p>
</div>
<p class="pw">

</p>
<p class="sw">

</p>

CSS

.main {
  width:300px;
  height:100%;
  background-color:lightblue;
}
.word {
  color:green;
}
.word:hover {
  background-color:lime;
}

JavaScript

var pwidth = document.querySelector('.word');
document.querySelector(".pw").innerHTML = pwidth.clientWidth + " " + pwidth.style.width;
var swidth = document.querySelector('.span');
document.querySelector(".sw").innerHTML = swidth.clientWidth + " " + swidth.style.width;