JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Main">
  <span>a</span>
  <span>b</span>
  <p>Paragraph</p>
  <div>One</div>
  <div class="hidden">Two</div>
  <div>Three</div>
  <div class="hidden">Four</div>
  <div>Five</div>
</div>

CSS

.hidden { display: none; }
span { display: none; }
p { display: none; padding: 15px; }

JavaScript

var oDiv = $("#Main");
var originalHeight = oDiv.height();
var arrHidden = [];

//show all:
oDiv.find("*").each(function() {
  var curElement = $(this);
  if (curElement.is(":visible") === false) {
    arrHidden.push(curElement);
    curElement.show();
  }
});

//now get height:
var heightIncludingHidden = oDiv.height();

//hide those that were previously hidden:
$.each(arrHidden, function(index, item) {
  item.hide();
});

console.log("original: " + originalHeight + ", with hidden: " + heightIncludingHidden);