JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box"></div>

CSS

* {
    box-sizing: border-box
}
#box {
    width:300px;
    height:300px;
    padding:14px 10px;
    background-color:#000;
}

JavaScript

var supports = function () {
    var div = document.createElement("div"),
        vendors = "Moz Webkit O Ms".split(" "),
        len = vendors.length;

    return function (prop) {
        if (prop in div.style) return true;

        prop = prop.replace(/^[a-z]/, function (val) {
            return val.toUpperCase();
        });

        while (len--) {
            if (vendors[len] + prop in div.style) {
                return true;
            }
        }
        return false;
    };
};

var isBox = supports("box-sizing");

var getWidth = function (elem) {
    var width = parseFloat(window.getComputedStyle(box).width);
    var padding = window.getComputedStyle(box).padding.split(" ");

    if (!isBox) {
        return width;
    }

    switch (padding.length) {
        case 4:
            return width - (parseFloat(padding[1]) + parseFloat(padding[3]));
            break;
        case 2:
            return width - (parseFloat(padding[1]) * 2);
            break;
        default:
            return width - (parseFloat(padding[0]) * 2);
            break;
    }
}

var box = document.getElementById("box");

alert(getWidth(box));