JSFiddle - React, Tailwind, and code Playground

HTML

<div>a</div>

CSS

div { float:left; width:100px; height:200px; padding:10px 20px 5px; margin:5px 3px 2px 4px; background-color:#000; }

JavaScript

//this way is working fine but
//need to do it with less code and without bugs

var ele = $('div');

var eleW = ele.width();
var eleH = ele.height();

alert(eleW);//returning 200
alert(eleH);//returning 100

var eleMR = parseInt(ele.css('margin-right'));
var eleML = parseInt(ele.css('margin-left'));
var eleMT = parseInt(ele.css('margin-top'));
var eleMB = parseInt(ele.css('margin-bottom'));

var elePR = parseInt(ele.css('padding-right'));
var elePL = parseInt(ele.css('padding-left'));
var elePT = parseInt(ele.css('padding-top'));
var elePB = parseInt(ele.css('padding-bottom'));


var eleTotalWidth = eleMR + eleML + elePR + elePL + eleW;

var eleTotalHeight = eleMT + eleMB + elePT + elePB + eleW;

alert(eleTotalWidth);//returning 147
alert(eleTotalHeight);//returning 122