JSFiddle - React, Tailwind, and code Playground

HTML

<p id="one">This is a paragraph that matches the constraints.</p>
<hr>
<p id="two">This is a paragraph that does not match the constraintsconstraintsconstraintsconstraints.</p>

CSS

html, body {
    width: 200px;
}

body {
    border-right: 1px dashed #FF1111;
}

JavaScript

function getInnerWidth(element) {
    
    var wrapper = document.createElement('span'),
        result;
    
    while (element.firstChild) {
        wrapper.appendChild(element.firstChild);
    }
    
    element.appendChild(wrapper);
    
    result = wrapper.offsetWidth;
    
    element.removeChild(wrapper);
    
    while (wrapper.firstChild) {
        element.appendChild(wrapper.firstChild);
    }
    
    return result;
    
}


alert(getInnerWidth(document.getElementById('two')));