JSFiddle - React, Tailwind, and code Playground

HTML

<div id="checkSizeExample">Some text that we want to know the size of</div>
<br />
<div id="result"></div>

CSS

#checkSizeExample
{
    font-family : Courier;
    font-size : 8pt;
}


#sizingClone {
    position : absolute !important;
    top : 100% !important;
    left : 100% !important;
    visibility: hidden !important;    
    width : auto;
    height : auto;
}

JavaScript

function getSizeOfTextInElement(domElement) {
    var $element = $(domElement),
        $clone = $element.clone(),
        size = {
            width : 0,
            height : 0
        };
        
    $clone.addClass("sizingClone");
    
    $(document.documentElement).append($clone);
    
    size.width = $clone.width();
    size.height = $clone.height();
    
    $clone.remove();
    
    return size;
}


var elementToCheck = document.getElementById("checkSizeExample"),
    sizeOfElement = getSizeOfTextInElement(elementToCheck),
    message = "element has a width of " + sizeOfElement.width + "px";

$("#result").text(message);