JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    This paragraph has a width set to 300px and padding set to 50px, resulting in a content width of 200px (due to box-sizing:border-box).
</p>

CSS

* {
    -moz-box-sizing: border-box;
}

p {
    width: 300px;
    padding: 50px;
    outline: 3px solid red;
}

JavaScript

var quad = document.querySelector('p').getBoxQuads({ box: 'content' })[0];

document.write(
    'getBoxQuads API to the rescue! Content width = ' + (quad.p2.x - quad.p1.x)
);