JSFiddle - React, Tailwind, and code Playground

by dylanjha

HTML

<div id="chat-box">
    <div id="chat-inner">
        <div id="top-bar">
        </div>
        <div id="messages-container">
            <div class="one-message">
                <span class="sender">I sent this</span>
                <span class="message-content">This is my long ass message. This is my long ass message. This is my long ass message</span>
            </div>
        </div>
    </div>
</div>

CSS

#chat-box {
    position: fixed;
    bottom: 1px;
    right: 20px;
    width: 350px;
    border: 1px solid black;
    height: 20px;
    overflow: hidden;
}

#messages-container { 
    overflow: scroll;
}

.one-message { 
    padding: 10px;
    /* position: relative; */
}

.sender { 
    /* position: absolute; */
    width: 80px;
    display: inline-block;
    float: left;
    border: 1px solid blue;
}

.message-content { 
    /* position: absolute; */
    width: 240px;
    display: inline-block;
    float: left;
    border: 1px solid 
}

#top-bar { 
   background-color: orange;
   height: 20px
}

#chat-box.expanded { 
    height: 200px;
}

JavaScript

$(function(){ 
    $('#top-bar').on("click", function(){
        $('#chat-box').toggleClass("expanded");     
    });

});