JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contenedor"><span id="final"></span></div>

<input type="text" id="mensaje" name="mensaje" />

<a id="boton" href="#">Enviar</a>

CSS

#contenedor {
  width: 500px;
  height: 150px;
  border: 1px solid black;
  overflow: scroll;
}

p {
  color: #320EF8;
  font-size: 120%;
  margin: 20px 15px;
}

#final {
  width: 100%;
  height: 1%;
}

JavaScript

var mensajes = '<p>John Doe: Blah, blah, blah...<br /></p>';

$('#final').before( mensajes );

function myFunction() {

    var mensaje = $('#mensaje').val(),
				content = '<p>Me: ' + mensaje + '</p>';

    $('#final').before( content );
    $('#mensaje').val('');
    $('#contenedor').animate({scrollTop: $( $( '#final' ) ).offset().top}, 1000);

}

$('#boton').on('click', myFunction);

$('#mensaje').keydown(function (e) {
    if (e.which === 13) {
        myFunction();
    }
});