JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div class="withmargin">
        sometext                            
    </div>
</div>

<div id="results">
</div>

CSS

.withmargin { margin: 20px; height: 20px; background: #ddd; }

JavaScript

// outerHeight of innerclass -> is correct
$("#results").append("height of inner: " + $(".withmargin").outerHeight(true) + "</br>");
// outerHeight of outerclass -> is NOT correct
$("#results").append("height of outer: " + $("#main").outerHeight(true) + "</br>");