JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tbchat-room">
		<div class="head">
			<span class="title">Chat Room</span>
			<a class="room-close-button pull-right">&times;</a>
		</div>
		<div class="words">
			<div class="content">
				<div>sample text</div>
				<div>sample text</div>
			</div>
		</div>
		<input class="say" type="text"/>
	</div>

CSS

.tbchat-room{
	position: fixed;
	bottom:0;
	width:260px;
	border:1px solid #aaa;
	background:#fff;
}

.tbchat-room .head{
	padding: 3px 10px;
	background:#3d9ac1;
	color:#fff;
}

.tbchat-room .words{
	height:230px;
	background:#ececec;
	overflow:auto;
	position:relative;
}

.tbchat-room .words .content{
	position:absolute;
	bottom:0;
}

.tbchat-room .say{
	width:246px;
	margin:0;
    border-top: 1px solid #ccc;
	border-bottom: 0;
	border-left: 0;
	border-right: 0;
    padding:4px 6px;
}

.pull-right{
    float:right;
}

.content{
    padding:5px 10px;
}

JavaScript

$(function(){
    $('.say').keypress(function(){
       	if(event.which == 13){
			$('.words .content').append("<div>s"+$(this).val()+"</div>");
			$(this).val('');
		}

    });
});