JSFiddle - React, Tailwind, and code Playground

HTML

<div id="target1">
    <h2>Example 1</h2>
    <p id="ex1">paragraph content</p>
</div>
<div id="target2">
    <div class="box a">
      <div class="box b">
        <div class="box c">
          <div class="box d">
            <div id="ex2" class="box e">
              Example 2
            </div>
          </div>
        </div>
      </div>
    </div>
</div>

<p id='result1'></p>
<p id='result2'></p>

CSS

#target1 {
    margin-top: 10px;
    height: 30px;
}
h2 {
    margin-top: 24px;
}
p {
    margin-bottom: 20px;
}
#target2 {
    height: 30px;
}
#ex2 {
    margin-top: 20px;
}
.box {
  margin: 10px;
}
.a {
  background: #777;
}
.b {
  background: #999;
}
.c {
  background: #bbb;
}
.d {
  background: #ddd;
}
.e {
  background: #fff;
}

JavaScript

var result11 = $('#target1').outerHeight(),
    result12 = $('#target1').outerHeight(true),
    result21 = $('#target2').outerHeight(),
    result22 = $('#target2').outerHeight(true);
$('#result1').html('example 1: expected height: 74 - outerHeight(): ' + 
     result11 + ' - outerHeight(true): ' + result12);
$('#result2').html('example 2: expected height: 60 - outerHeight(): ' + 
     result21 + ' - outerHeight(true): ' + result22);