JSFiddle - React, Tailwind, and code Playground

HTML

<div id='chat'>
    <div id='content'></div>
    <input id='field' type='text' value='',placeholder='' />
</div>

CSS

#chat {
    background-color: rgba(0,0,0,0.8);
    min-width: 400px;
    min-height: 200px;
    position: fixed !important;
    bottom: 10px !important;
    left: 10px;
    padding: 5px;
    color: white;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -ms-border-radius:5px;
}

#content {
    position: absolute;
    overflow-y: scroll;
    top: 5px;
    bottom: 30px;
    left: 5px;
    right: 5px;
    font-family: verdana;
    font-size: 8pt;
}

#field {
    position: absolute;
    left: 5px;
    bottom: 5px;
    background-color: rgba(0,0,0,0);
    color: white;
    border-width: 1px;
    outline: 0;
    font-family: verdana;
    font-size: 8pt;
}

JavaScript

window.onload = function() {
    $('#field').each(function(){
      $(this).width($(this).parent().width()-4);
    });
    
    $('#chat').resizable({
      handles: 'n, ne, e',
      resize: function(event, ui) {
        $(this).css({left:'10px'}),
        $(this).css({bottom:'10px'}),
        $('#field').width($('#field').parent().width()-4);
      }
    });    
    var handles = $('#chat').resizable('option', 'handles');
    $('#chat').resizable('option', 'handles', 'n, ne, e');
}