JSFiddle - React, Tailwind, and code Playground

by muffls

HTML

<div class="content-box">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="border-box">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>

<span class="content-box-span"></span></br>
<span class="border-box-span"></span>

CSS

.content-box, .border-box {
    width:200px;
    background-color:#A4E4A4;
    padding:10px;
    border:5px #FB7B7B solid;
    
    /* does not effect the box sizing */
    margin:10px 0;
}
.border-box {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

JavaScript

$(document).ready(function () {
    $('.content-box-span').text("content-box: " + $('.content-box').outerWidth() + "px");
    $('.border-box-span').text("border-box: " + $('.border-box').outerWidth() + "px");
});