JSFiddle - React, Tailwind, and code Playground

HTML

<div class="index_reload">
    <!--index_reload-->
    <div id="chat_area">
    <div class="chat_box main_chat1" id="chat_id1">
        <!--chat_box-->
        <div class="user_box">
            <div class="name open_chat1 left">mozilla</div>
            <div class="closed1 right">x &nbsp;</div>
            <div class="clear"></div>
        </div>
        <div class="wrap_box1">
            <!--wrap_box-->
            <div class="message_content">
                <!--message_content-->
                <div class="register" style="display: none;">
                    <p>Please insert Username to continue</p>
                    <form action="process.php?action=register&amp;chat_box=on" method="post" name="form" id="register">
                        <input type="text" value="" name="username" autocomplete="on">
                        <br>
                        <input type="submit" value="submit" class="btn register" style="display: none;">
                    </form>
                </div>
                <div id="reply_output">
                    <div class="message_post">
                        <img src="http://thestar.com.my/common/images/logo_50x50.gif" width="35" class="left user_img">
                        <div class="message_text left">Welcome to youbeli!</div>
                        <div class="clear"></div>
                    </div>
                    <div class="message_post">
                        <img src="http://www.globalwoodmart.my/_img/logo_peka.gif" width="35" class="left user_img">
                        <div class="message_text left">A</div>
                        <div class="clear"></div>
                    </div>
                    <div class="message_post">
                        <img src="http://thestar.com.my/common/images/logo_50x50.gif" width="35" class="left user_img">
                        <div class="message_text left">B</div>
                        <div class="clear"></div>
                    </div>
              ...

CSS

body {
    margin:0px;
    padding:0px;
}
* {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
.chat_box {
    display:inline-block;
    border:1px solid #9c9c9c;
    width:25px;
    margin-left: 5px;
}
.user_box {
    display:block;
    padding:20px;
    background-color:#5e75a7;
    color:#fff;
    bottom:0;
}
.user_box:hover {
    cursor:pointer;
}
.left {
    float:left;
}
.right {
    float:right;
}
.clear {
    clear:both;
}
.message_post {
    border-top:1px solid #EFEFEF;
    display:block;
    padding:5px 3px;
}
.message_text {
    margin-left:5px;
}
.message_content {
    border:1px solid #ddd;
    height:225px;
    overflow-y:scroll;
}
.box_reply {
    border:1px solid #ddd;
}
.text_reply {
    display:block;
    width:99%;
}
.user_img {
}
.hide_wrap_box {
    height:22px;
    bottom:0;
}
.name {
    display: block;
    width: 80%;
}
.index_reload {
    border: 1px solid #ddd;
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 100%;
}
#chat_area {
    float:right;
}

JavaScript

$(document).ready(function () {

    //Dont worry about this script im using php to loop this is just temporary
    //Close
    $('.closed1').click(function () {
        $('.wrap_box1').hide();
        $('.main_chat1').addClass('hide_wrap_box');
    });

    //Open
    $('.open_chat1').click(function () {
        $('.wrap_box1').show();
        $('.main_chat1').removeClass('hide_wrap_box');
    });

    //Close
    $('.closed2').click(function () {
        $('.wrap_box2').hide();
        $('.main_chat2').addClass('hide_wrap_box');
    });

    //Open
    $('.open_chat2').click(function () {
        $('.wrap_box2').show();
        $('.main_chat2').removeClass('hide_wrap_box');
    });
});