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 constraintsconstraintsconstraints.</p>

CSS

html, body {
    width: 200px;
}

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

JavaScript

$.each($("#two").text().match(/\b\w+\b/g), function() {
        var span = $("<span>").text(this.toString()).appendTo("body");
            if (span.width() > $("#two").width()) {
                alert("Text in #two should only be " + $("#two").width() + "px width.. your text is " + span.width() + "px width.");
            }
        span.remove();
})