JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="AddLine();">Add some text</button>
<div id="outer">
    <div id="inner">
    </div>
</div>

CSS

#outer
{
    height:120px;
    border:solid 1px black;
    overflow-y:auto;
}

JavaScript

var lineCount = 1;
function AddLine() 
{
    $('#inner').append(lineCount + ' Adding a line of text<br/>');
    lineCount++;
    var outerTop = $('#outer').scrollTop();
    var outerBottom = outerTop + $('#outer').height();
    var innerTop = $('#inner')[0].offsetTop;
    var innerBottom = innerTop + $('#inner').height();
    if (innerBottom > outerBottom)
        $('#outer').scrollTop(innerBottom - $('#outer').height());


}