JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<table id="table">
			<thead>
                <tr><th >Header 1</th><th class="break-after">Header 2</th><th>Header 3</th><th>Header 4</th></tr>
			</thead>
			<tbody>
				<tr valign="top">
					<td>A1<br/>text<br/>text</td>
					<td>B1<br/>text</td>
					<td>C1</td>
					<td>D1</td>
				</tr>
				<tr valign="top">
					<td>A2</td>
					<td>B2<br/>text<br/>text<br/>text</td>
					<td>C2</td>
					<td>D2<br/>text</td>
				</tr>
			</tbody>
		</table>
	</body>

CSS

table {
    border:1px solid black;
}
td {
    border:1px dotted black;
}

JavaScript

$(document).ready(function() {
    var thisTable = $('#table'),
        otherTable= thisTable.clone(false, true),
        breakAfterIndex = $('tr th', thisTable).index($('tr th.break-after', thisTable)),
        wrapper = $('<div/>');
    
    wrapper.css({'page-break-before': 'always'});
    wrapper.append(otherTable);
    thisTable.after(wrapper);
    $('tr', thisTable).find('th:gt(' + breakAfterIndex + ')').remove(); 
    $('tr', thisTable).find('td:gt(' + breakAfterIndex + ')').remove(); 
    $('tr', otherTable).find('th:lt(' + (breakAfterIndex + 1) + ')').remove(); 
    $('tr', otherTable).find('td:lt(' + (breakAfterIndex + 1) + ')').remove();
    
    $('tr', table).each(function(index) {
        var $this =$(this),
            $otherTr = $($('tr', otherTable).get(index)),
            maxHeight = Math.max($this.height(), $otherTr.height());
        $this.height(maxHeight);
        $otherTr.height(maxHeight);      
    });
});