JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <ul>

  </ul>
</div>
<textarea></textarea>
<button>Send</button>

CSS

div{
	overflow-y: scroll;
	overflow-x: hidden;
	height: 400px; 
  width:400px;
  border:1px solid black;
}
div ul {
	display: table;
	list-style: none;
}
div ul li{
	display: block;
	background-color: #b70505;
    color: white;
    font-weight: 600;
    font-size: 0.8em;
    border-radius: 25px;
    margin-top: 5px;
    padding: 10px;
    max-width:200px;
    word-wrap:break-word;
}

JavaScript

var box = document.getElementsByTagName('div')[0];
var newText = document.getElementsByTagName('textarea')[0];
var button = document.getElementsByTagName('button')[0];

button.addEventListener('click', function(e){
		e.preventDefault();
		if(newText.value !== ''){
			var Newitem = document.createElement('li');
      Newitem.innerHTML = newText.value;
			box.getElementsByTagName('ul')[0].appendChild(Newitem);
			box.scrollTop = box.scrollHeight;
		}
});