Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat</title>
   <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css'>

    <style>
body {
    display: flex;
    justify-content: center;
    font-family: "proxima-nova", "Source Sans Pro", sans-serif;
    font-size: 1em;
    color: #32465a;
}
p,ol,ul,li{
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline
}
ol,ul{list-style:none}
.wrapper {
    float: right;
    background: #e8efef;
    width: 35%;
    height: 600px;
    overflow: hidden;
    position: relative;
}

.wrapper .message-content {
    height: auto;
    min-height: calc(100% - 93px);
    max-height: calc(100% - 93px);
    overflow-y: scroll;
    overflow-x: hidden;
}

.wrapper .message-content::-webkit-scrollbar {
    width: 5px;
    background: transparent;
}
.wrapper .message-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
}
.wrapper .message-content ul li {
    display: inline-block;
    clear: both;
    float: left;
    margin: 5px 15px;
    width: calc(100% - 25px);
    font-size: 0.9em;
}
.wrapper .message-content ul li:nth-last-child(1) {
    margin-bottom: 20px;
}
.wrapper .message-content ul li.received img {
    margin: 6px 8px 0 0;
}
.wrapper .message-content ul li.received p {
    background: #fff;
    color: #111;
}
.wrapper .message-content ul li.sent img {
    float: right;
    margin: 6px 0 0 8px;
}
.wrapper .message-content ul li.sent p {
    background: #0174AD;
    float: right;
    color: #fff;
}
.wrapper .message-content ul li img {
    width: 22px;
    border-radius: 50%;
    float: left;
}
.wrapper .message-content ul li p {
    display: inline-block;
    padding: 10px 15px;
    border-radius: 10px;
    max-width: 300px;
}
.wrapper .msg-box {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 99;
}
.wrapper .msg-box .wrap {
    position: relative;
}
.wrapper .msg-box .wrap input {

    float: left;
    border: none;
    width: calc(100% - 90px);
    padding: 11px 32px 10px 8px;
    font-size: 0.8em;
    color: #32465a;
}

.wrapper .msg-box .wrap input:focus {
    outline: none;
}

.wrapper .msg-box .wrap button {
    float: right;
    border: none;
    width: 50px;
    padding: 12px 0;
    cursor: pointer;
    background: #0174AD;
    color: #f5f5f5;
}
.wrapper .head-img {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #f9f9f9;
}
.wrapper .head-img img {
    width: 40px;
    border-radius: 50%;
    float: left;
    margin: 9px 12px 0 9px;
}
.wrapper .head-img p {
    float: left;
}
        </style>
</head>
<body>

<div class="wrapper">
    <div class="head-img">
        <img src="user.png" alt="" />
        <p>John Deo</p>
    </div>
    <div class="message-content">
        <ul>
            <li class="received">
                <img src="user.png" alt="" />
                <p>How the hell am I supposed to get a jury to believe you when I am not even sure that I do?!</p>
            </li>
            <li class="sent">
                <img src="user.png" alt="" />
                <p>When you're backed against the wall, break the god damn thing down.</p>
            </li>
            <li class="received">
                <img src="user.png" alt="" />
                <p>Excuses don't win championships.</p>
            </li>
            <li class="received">
                <img src="user.png" alt="" />
                <p>Oh yeah, did Michael Jordan tell you that?</p>
            </li>
            <li class="sent">
                <img src="user.png" alt="" />
                <p>No, I told him that.</p>
            </li>
            <li class="sent">
                <img src="user.png" alt="" />
                <p>What are your choices when someone puts a gun to your head?</p>
            </li>
            <li class="received">
                <img src="user.png" alt="" />
                <p>What are you talking about? You do what they say or they shoot you.</p>
            </li>
            <li class="sent">
                <img src="user.png" alt="" />
                <p>Wrong. You take the gun, or you pull out a bigger one. Or, you call their bluff. Or, you do any one of a hundred and forty six other things.</p>
            </li>
             <li class="received">
                <img src="user.png" alt="" />
                <p>Oh yeah, did Michael Jordan tell you that?</p>
            </li>
            <li class="sent">
                <img src="user.png" alt="" />
                <p>No, I told him that.</p>
            </li>
             <li class="received">
                <img src="user.png" alt="" />
                <p>Excuses don't win championships.</p>
            </li>
            <li class="sent">
                <img src="user.png" alt="" />
                <p>Wrong. You take the gun, or you pull out a bigger one. Or, you call their bluff. Or, you do any one of a hundred and forty six other things.</p>
            </li>
        </ul>
    </div>
    <div class="msg-box">
        <div class="wrap">
            <input type="text" id="message-txt" placeholder="Enter your message..." />
            <button class="submit"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
        </div>
    </div>
</div>

<script src='https://code.jquery.com/jquery-2.2.4.min.js'>
$(".message-content").animate({scrollTop: $(document).height()}, "fast");

function sentMessage() {
    message = $("#message-txt").val();
    if ($.trim(message) == '') {
        return false;
    }
    $('' + message + '').appendTo($('.message-content ul'));
    $('#message-txt').val(null);

    $(".message-content").animate({scrollTop: $(document).height()}, "fast");
}
$('.submit').click(function () {
    sentMessage();
});

$(window).on('keydown', function (e) {
    if (e.which == 13) {
        sentMessage();
        return false;
    }
});
</script>

</body>
</html>