JSFiddle - React, Tailwind, and code Playground

by Yonathan Benitah

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="mydiv">
  <div id="content">
 
  </div>
  
</div>
<button id="add">add</button>

CSS

#mydiv {
  position: absolute;
  top: 1%;
  bottom: 1%;
  left: 2%;
   width: 40vw;
  height: 49vh;
  max-width: 260px;
  font-size: 12px;
  border: 1px solid black;
   background-color: white;
  border-radius: 5px;
  overflow: auto;
  display: table-cell;
  text-align: center;
  vertical-align: bottom;
}
 #content {
  width:100%;
  position:absolute;
  bottom:0;
   overflow: auto;
   max-height:49vh;
 } 
#add{
  position:relative;
  top:270px;
}

JavaScript

var a=0;
$(function(){
    $('#add').click(function(){
               a++;
        $('#content').append('line'+a+'<br>');
        $('#content').scrollTop($(document).height());
	});
});