JSFiddle - React, Tailwind, and code Playground

HTML

<div id="target1">
    <h2>Example 1</h2>
    <p>paragraph content</p>
</div>

<p id='result'>Result: </p>

CSS

#target1 {
    margin-top: 10px;
    height: 30px;
}
h2 {
    margin-top: 24px;
}
p {
    margin-bottom: 20px;
}
#result {
    margin-top: 50px;
}

JavaScript

var collapsedHeight = function( target ) {
   var $wrapper = $('<div />'),
     $target = $(target);
 
   $wrapper.insertAfter($target);
   $target.appendTo($wrapper);
   $wrapper.css({
       borderTop: '1px solid transparent',
       borderBottom: '1px solid transparent'
   });
   var result = $wrapper.outerHeight() - 2;
   $target.insertAfter($wrapper);
   $wrapper.remove();

   return result;
};

$('#result').html('Result: ' + collapsedHeight( '#target1' ));