JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contViewport">
  <div id="cont">
     <div class="entry">
       <div class="t_time">16:40</div>
       <div class="t_label">Some text</div>
     </div>
     <div class="entry">
       <div class="t_time">16:40</div>
       <div class="t_label">Some text</div>
    </div>
     <div class="entry">
       <div class="t_time">16:40</div>
       <div class="t_label">Some text</div>
    </div>
     <div class="entry">
       <div class="t_time">16:40</div>
       <div class="t_label">Some text</div>
    </div>
  </div>
</div>
<input id="ExampleAdd" type="button" value="Add Entry" />

CSS

#contViewport {
    height:100px;
    overflow:hidden;
    border: 1px solid black;
}

JavaScript

function scrollToBottom() {
    $("#contViewport").animate({ scrollTop: $('#cont')[0].scrollHeight}, 1000);
}

scrollToBottom();

$(document).on('click', '#ExampleAdd', function( event ) {
    
    var d = new Date();
    var time = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
    
    $('#cont').append( '<div class="entry"><div class="t_time">'+time+'</div><div class="t_label">Some text added</div></div>' );
    
    scrollToBottom();

    event.preventDefault();
});