JSFiddle - React, Tailwind, and code Playground

HTML

<!-- CORRECT RESULT: when "display:none" set to child -->
<div class="parent first">
    <div class="child first">
        box
    </div>
</div>


<!-- INCORRECT RESULT: when "display:none" set to parent -->
<div class="parent last">
    <div class="child last">
        box
    </div>
</div>

CSS

.parent {
    width:100%;
    
    background-color:red;
}

.child {
    height:50px;
    width:100%;
    border-bottom: 1px solid black;
    
    background-color:blue;
}

.parent.last {
    display:none;
}

.child.first {
    display:none;
}

JavaScript

$(document).ready(function() {
    // Note: the correct result = 51 (height + border-bottom)

    var height_correct   = $('.child.first').outerHeight(true);
    var height_incorrect = $('.child.last').outerHeight(true);
    
    alert('correct:   first  child="'+height_correct+'"');
    alert('incorrect: second child="'+height_incorrect+'"');
    
    /* 
    Possible fix:
      When using outerHeight function, if the element has 'display:none'
      return the sum of CSS height and (border-top,border-bottom)
      (I'm leaving margin and padding out in this example)
    */
    
    var height_fix  = parseInt($('.child.last').css('height')) + 
                      parseInt($('.child.last').css('border-top-width')) + 
                      parseInt($('.child.last').css('border-bottom-width'));
    
    alert('proposed fix="'+height_fix+'"');
    
    /*  
        I realize that getting the height of the parent with this method will not 
        include the height of the child since it's not shown, but this will be accurate
        for the direct elements
    */
});