JSFiddle - React, Tailwind, and code Playground

HTML

<div class="chat-box">
    <div class="chat-msg">
        <div class="chat-msg-user">User</div>
        <div class="chat-msg-text">Content</div>
    </div>
    <div class="chat-msg">
        <div class="chat-msg-user">User</div>
        <div class="chat-msg-text">Content</div>
    </div>
    <div class="chat-msg">
        <div class="chat-msg-user">User</div>
        <div class="chat-msg-text">Content</div>
    </div>
    <div class="chat-msg">
        <div class="chat-msg-user">User</div>
        <div class="chat-msg-text">Content</div>
    </div>
    <div class="chat-msg">
        <div class="chat-msg-user">User</div>
        <div class="chat-msg-text">Content</div>
    </div>
</div>
<div class="chat-msg-input">
    <input type="text" class="chat-msg-text-input" />
    <button data-ng-click="addMessage()">Send</button>
</div>
</br>
<!-- just for demo purposes -->
<button id="test">Add Message</button>

CSS

.chat-box {
    border: 1px solid black;
    padding: 10px;
    height: 200px;
    overflow: auto;
}
.chat-msg-user {
    border-bottom: 1px solid red;
}
.chat-msg {
    border: 1px solid red;
}

JavaScript

$("#test").click(function(){
  $(".chat-box").append('<div class="chat-msg"><div class="chat-msg-user">User</div><div class="chat-msg-text">Content</div></div>');
})