JSFiddle - React, Tailwind, and code Playground

by kritya

HTML

<div class="main-cont-box">
Chat msg here
<div class="main-doing">Chatting with
</div>
</div>
<div id="add">Add</div>

CSS

.main-cont-box {
    position:absolute;
    top:5%;
    left:1px;
    background-color:#0F0;
    width:70%;
    height:60%;
}
.main-doing {
    position:absolute;
    bottom:100px;
    right:0px;
    width:100%;
    overflow-x:scroll;
    height:4em;
}
#add {
    position:absolute;
    top:200px;
}

JavaScript

$("#add").click(function() {
    $('.main-doing').append("<span style='border:1px;border-style:solid;background-color:White; float: left;'>Div Contents</spn>");
    });