JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left" id="test1">
    	<h1>Dit is een eerste event</h1>

    <div>Dat schrijft De Morgen. Zelfs als er een bouwvergunning is verleend kan een buur alsnog protest aantekenen. Jaarlijks komen er zo'n 880 dossiers binnen bij de bevoegde instanties. De Raad voor Vergunningsbetwistingen werd in 2009 in het leven geroepen om 'snel' een beslissing te nemen in die dossiers, maar ook die kijkt dus volgens De Morgen al tegen een enorme achterstand aan.</div>
</div>
<div class="right" id="test2">
    	<h1>Dit is een tweede event</h1>

    <div>Dat schrijft De Morgen. Zelfs als er een bouwvergunning is verleend kan een buur alsnog protest aantekenen. Jaarlijks komen er zo'n 880 dossiers binnen bij de bevoegde instanties. De Raad voor Vergunningsbetwistingen werd in 2009 in het leven geroepen om 'snel' een beslissing te nemen in die dossiers, maar ook die kijkt dus volgens De Morgen al tegen een enorme achterstand aan.</div>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    color: #fff;
}
body {
    display: -moz-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -moz-box-align: stretch;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
}
.left, .right {
    width: 50%;
    height: inherit;
    -moz-flex-box: 1;
    -webkit-flex-box:1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden;
    font-size: 1em;
}
.left {
    background: orange;
}
.right {
    background: green;
}

JavaScript

$(function () {
    $('#test1 div').css('font-size', '1em');
    $('#test2 div').css('font-size', '1em');

    while ($('#test1 div').height() + $('#test1 h1').height() < $('#test1').height()) {
        $('#test1 div').css('font-size', (parseInt($('#test1 div').css('font-size')) + 1) + "px");
    }
    while ($('#test1 div').height() + $('#test1 h1').height() > $('#test1').height()) {
        $('#test1 div').css('font-size', (parseInt($('#test1 div').css('font-size')) - 1) + "px");
    }

    while ($('#test2 div').height() + $('#test2 h1').height() < $('#test2').height()) {
        $('#test2 div').css('font-size', (parseInt($('#test2 div').css('font-size')) + 1) + "px");
    }
    while ($('#test2 div').height() + $('#test2 h1').height() > $('#test2').height()) {
        $('#test2 div').css('font-size', (parseInt($('#test2 div').css('font-size')) - 1) + "px");
    }
});