JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bob">
1<br>
2<br>
3<br>
4<br>
</div>

CSS

#bob {
 padding: 20px 0 10px 0;
 border: 1px solid black;    
}

JavaScript

function getHeight(id) {
    
    var obj           = document.getElementById(id);
    var height        = parseInt(obj.offsetHeight, 10);
    var paddingTop    = 0;
    var paddingBottom = 0;
    var borderWidth   = 0;
    
    try {
       borderWidth   = window.getComputedStyle(obj, null).getPropertyValue('border-top-width');
       paddingTop    = window.getComputedStyle(obj, null).getPropertyValue('padding-top');
       paddingBottom = window.getComputedStyle(obj, null).getPropertyValue('padding-bottom');
    } catch(e) {
    
       borderWidth = obj.currentStyle.borderWidth;
       paddingTop = obj.currentStyle.paddingTop;
       paddingBottom = obj.currentStyle.paddingBottom;
    } 
    
    borderWidth   = parseInt(borderWidth, 10);
    paddingTop    = parseInt(paddingTop, 10);
    paddingBottom = parseInt(paddingBottom, 10);
    
    height -= (borderWidth * 2 + paddingTop + paddingBottom);
    
    return height;
}

alert(getHeight("bob"));