JSFiddle - React, Tailwind, and code Playground

by amatiasq

HTML

<div class="container">
    <span class="content">
        <span>1<br></span>
        <span>2<br></span>
        <span>3<br></span>
        <span>4<br></span>
    </span>
    <span class="input" contenteditable></span>
</div>

CSS

.container {
    width: 50px;
    height: 100px;
    overflow-y: scroll;
    word-wrap: break-word;
}

.content {
    background-color: red;
}

.input {
    background-color: yellow;
}

JavaScript

$('.input').keypress(function(event) {
    if (event.which !== 13)
        return;
    
    var line = $('<span>').text($('.input').text()).append('<br>');
    $('.content').append(line)
    $('.input').text('')
    $('.container').scrollTop($('.container')[0].scrollHeight);
});

$('.input').focus();