JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
</div>
<div>
    <p id="wrong"></p>
    <p id="real"></p>
</div>

CSS

#container {
    margin: 5px;
}
.content {
    height: 20px;
    margin-top: 10px;
    margin-bottom: 15px;
}

JavaScript

var wrongHeight = $('#container').outerHeight(true);

var mVert = parseInt($('#container').css('margin-top'))
    + parseInt($('#container').css('margin-bottom'));
var mVertChildren = parseInt($('#container').children().first().css('margin-top'))
    + parseInt($('#container').children().last().css('margin-bottom'));

var realHeight = $('#container').outerHeight(false)
    + (mVert > mVertChildren ? mVert : mVertChildren);

$('#wrong').html(wrongHeight);
$('#real').html(realHeight);