JSFiddle - React, Tailwind, and code Playground

HTML

<div id=container>
<div id = "test1" class="test"></div>
<div id = "test2" class="test"></div>
<div id = "test3" class="test"></div>
<div id = "test4" class="test"></div>
</div>

CSS

#container{
height:101px;
width:101px;
}
#test1 {
    width: 101px;
    height: 101px;
    background-color: green;
    margin-right: 2%;
    margin-bottom:2%;
}

#test2 {
    width: 99.6px;
    height: 99.6px;
    background-color: red;
    margin-right: 2.6px;
    margin-bottom: 2.6px;
}

#test3 {
    width: 99.6px;
    height: 99.6px;
    background-color: black;
    padding-right: 2.6px;
    padding-bottom: 2.6px;
}

#test4 {
    width: 99.6px;
    height: 99.6px;
    background-color: black;
    padding-right: 2%;
    padding-bottom: 2%;
}

JavaScript

var s ="";
jQuery(".test").each(function() {
    s+= '\n'+ jQuery(this).attr('id')+"\n"+'width:' + jQuery(this).width() + "\n" + 'outer width:' + jQuery(this).outerWidth(true) + '\n' + 'height:' + jQuery(this).height() + "\n" +'outer height:' + jQuery(this).outerHeight(true);
});
alert(s);