JSFiddle - React, Tailwind, and code Playground

HTML

<h2>I want my elements to be the width and height I set in the CSS, regardless of padding and border!</h2>
<div id="noBoxSizing"><strong>No box-sizing</strong></div>
<br >
<div id="boxSizing"><strong>With box-sizing</strong></div>

CSS

#boxSizing{
    -moz-box-sizing: border-box; 
    box-sizing: border-box
}
div{
    width:250px;
    height:250px;
    background-color:red;
    border:20px solid yellow;
    padding:20px;
    font-size:11px;
}
div strong{
    font-weight:bold;
    font-size:14px;
}

JavaScript

$('div').html(function(index,oldHtml){
  var str =  'width: ' + $(this).width()
            + '<br>'
            + 'height: ' + $(this).height()
            + '<br>'
            + 'width+padding: ' + $(this).innerWidth()
            + '<br>'
            + 'height+padding: ' + $(this).innerHeight()
            + '<br>'
            + 'width+padding+border: ' + $(this).outerWidth()
            + '<br>'
            + 'height+padding+border: ' + $(this).outerHeight();      
  return oldHtml + '<br>' + str;
});