JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <div style="padding-left:20px;">
         <p>
            <button id="b1" type="button">.width(200)</button>
            <button id="b2" type="button">.css('width', 200)</button>
            <button id="b3" type="button">.outerWidth(200)</button>
        </p>

        <div id="border-box" class="box" style="box-sizing:border-box;margin-left:40px;line-height: 120px;">
            <!-- 40px = padding + border -->
            <b>border-box</b>
        </div>
        <div style="height:10px;"></div>
        <div id="content-box" class="box" style="box-sizing:content-box;line-height: 200px;">
            <b>content-box</b>
        </div>
        <pre id="output"></pre>
        
        <h1>Box sizing &amp; jQuery</h1>
        <p>
            Summary:
            <ul>
                <li>use .outerWidth(px) if your goal is to specify exact pixel dimensions of an element</li>
                <li>beware widths in html/css for content-box (default) - change to border-box instead (nb this is the default applied by bootstrap)</li>
            </ul>
        </p>
        <p>
            Background:
            <ul>
                <li>
                    HTML/CSS widths:
                    <ul>
                        <li>border-box - border and padding cut into box so that outer width of box = width specified in html/css</li>
                        <li>content-box - border and padding added outside box so that outer width of box = width specified in html/css + border + padding</li>
                    </ul>
                </li>
                <li>
                    jQuery getters - NOTE: same behaviour for border-box and content-box:
                    <ul>
                        <li>.width() gets width of content excluding margin, border, and padding - i.e. red area</li>
                        <li>.outerWidth() gets width of content + border + padding excluding margin -...

CSS

.box {
    border: 20px solid #e7eaec;
    padding: 20px;
    width: 200px;
    height: 200px;
    margin: 40px;
    text-align: center;
    opacity: 0.5;
    background-image: linear-gradient(salmon, salmon), /* content */
    linear-gradient(aqua, aqua); /* padding */
    background-clip: content-box, padding-box;
}

JavaScript

function appendConsole(newText) {
    console.log(newText);
    var text = $('#output').html();
    $('#output').html(text + '\n' + newText);
}

function printDimensions(b) {
    var box = $(b),
        dims = {
            width: box.width(),
            //height: box.height(),
            outerWidth: box.outerWidth(),
            //outerHeight: box.outerHeight(),
            outerWidthTrue: box.outerWidth(true),
            //outerHeightTrue: box.outerHeight(true),
            innerWidth: box.innerWidth(),
            //innerHeight: box.innerHeight()
        },
        json = JSON.stringify(dims);
    appendConsole(b + ':' + json);
}

appendConsole('--------------------------------------------------------------------------------------------------------------------------------------------');
appendConsole('Init - widths specific in html/css');
printDimensions('#border-box');
printDimensions('#content-box');

function changeWidth(i) {
    appendConsole('--------------------------------------------------------------------------------------------------------------------------------------------');
    if (i === 1) {
        appendConsole('.width(200)');
        $('#border-box').width(200);
        $('#content-box').width(200);
    } else if (i === 2) {
        appendConsole(".css('width', 200)");
        $('#border-box').css('width', 200);
        $('#content-box').css('width', 200);
    } else {
        appendConsole(".outerWidth(200)");
        $('#border-box').outerWidth(200);
        $('#content-box').outerWidth(200);
    }
    printDimensions('#border-box');
    printDimensions('#content-box');
}

$(function() {
    $('#b1').click( function() { changeWidth(1); });
    $('#b2').click( function() { changeWidth(2); });
    $('#b3').click( function() { changeWidth(3); });
});