JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item" data-print="section">= 400px</div> 
<div class="item" data-print="section">= 200px</div> 
<ul data-print="section"> = 300px
</ul>
<div class="item" data-print="section"> = 50px</div> 
<div class="item" data-print="section"> = 100px</div>

JavaScript

var staticHeight = 0;
$('[data-print=section]').each(function() {

    staticHeight += $(this).filter(':visible').outerHeight(true);
    var pageHeight = 100

    console.log(staticHeight)

    if (staticHeight > pageHeight) {
        $(this).after( '<div class="page-break">Page Break</div>');
        staticHeight = 0;
    }

});