JSFiddle - React, Tailwind, and code Playground

HTML

<h1 id="test1">
    How wide is this text?
</h1>
<div id="result1">Run script to find out</div>
<hr/>
<p id="test2">
    How wide is this text?
</p>
<div id="result2"></div>
<hr/>
<p id="test3">
    How wide is this text?<br/><br/>
    f sdfj f sdlfj lfj lsdk jflsjd fljsd flj sflj sldfj lsdfjlsdjkf sfjoifoewj flsdjfl jofjlgjdlsfjsdofjisdojfsdmfnnfoisjfoi  ojfo dsjfo jdsofjsodnfo sjfoj ifjjfoewj fofew jfos fojo foew jofj s f j
</p>
<div id="result3"></div>

JavaScript

function getTextWidth(text, font) {
    var canvas = getTextWidth.canvas || 
        (getTextWidth.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(text);
    return metrics.width;
};

$("#result1")
.text("answer: " +
    getTextWidth(
                 $("#test1").text(), 
                 $("#test1").css("font")) + " px"); 

$("#result2")
.text("answer: " +
    getTextWidth(
                 $("#test2").text(), 
                 $("#test2").css("font")) + " px");

$("#result3")
.text("answer: " +
    getTextWidth(
                 $("#test3").text(), 
                 $("#test3").css("font")) + " px");