JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <header>Header tag</header>
    <div id="body">
         <h1>Title</h1>

        <p class="content"></p>
        <br />
        <br />
    </div>
    <footer>Footer tag</footer>
</div>

JavaScript

$(document).ready(function () {
    var a = $('header').outerHeight(true);
    var b = $('div#body').outerHeight(true);
    var c = $('footer').outerHeight(true);
    var x = $('.outer').height();
    b = $('div#body').wrap( '<div style="border:1px solid transparent;"></div>' ).parent().height();
    $('div#body').unwrap();
    $('p.content').html("Is " + a + " +  " + b + " + " + c + " = " + x + "?");

})