JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer a">
    Outer A <small>(implicit height)</small><br/>
    <div class="inner a">Inner A<br/><small>(implicit height)</small></div>
    <div class="inner b">Inner B<br/><small>(height: 80px)</small></div>
</div>
<div class="outer b">Outer B <small>(min-height: 150px)</small></div>
<div class="clearfix"></div>
<p>P <span><small>(implicit height)</small></span></p>
<textarea rows="24"></textarea>

CSS

.outer, .inner, p {
    background-color: #ddd;
    padding: 10px;
}
.outer, .inner {
    width: 40%;
}
.a {
    float: left;
}
.b {
    float: right;
}
.inner, span {
    background-color: #ccc;
}
.inner.b {
    height: 80px;
}
.outer.b {
    min-height: 150px
}
.clearfix {
    clear: both;
}
textarea {
    width: 100%;
    font-family: monospace;
    font-size: 10px;
}

JavaScript

var $outer_a = $('.outer.a'),
    $outer_b = $('.outer.b'),
    $inner_a = $('.inner.a'),
    $inner_b = $('.inner.b'),
    $p       = $('p'),
    $span    = $('p span'),
    $ta      = $('textarea');

function log(label, message) {
    $ta.append(label + ": " + message + "\n");
}

function logHeights(container_name) {
    $container = eval("$" + container_name);
    log(container_name + ".height()",          $container.height());
    log(container_name + ".css('height')",     $container.css('height'));
    log(container_name + ".css('min-height')", $container.css('min-height'));
    log(container_name + ".css('max-height')", $container.css('max-height'));
    log(container_name + "[0].scrollHeight",   $container[0].scrollHeight + "\n");
}

logHeights('outer_a');
logHeights('outer_b');
logHeights('inner_a');
logHeights('inner_b');
logHeights('p');
logHeights('span');