JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div id="messages">
        <div class="message clearfix">
            <div class="message-text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores corrupti sit autem neque error eos vel veniam ex ad doloremque!
            </div>
            <div class="message-comments">
                <div class="comment">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi repudiandae ipsum inventore nisi. Recusandae molestiae.
                </div>
            </div>
            <div class="add-comment">Add comment</div>
        </div>
        
         <div class="message clearfix">
            <div class="message-text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores corrupti sit autem neque error eos vel veniam ex ad doloremque!
            </div>
            <div class="message-comments">
            </div>
            <div class="add-comment">Add comment</div>
        </div>
    </div>
</div>

CSS

.clearfix::before, 
.clearfix::after{
	content: "";
	display: table;
}

.clearfix::after{
	clear:both;
}
#messages{
    margin:5px;
}
.message{
    border:1px solid #eee;
    padding:5px;
    margin-bottom:10px;
}
.message-text{
    padding:10px;
    margin-bottom:10px;
    border:1px solid #eee;
    background: #eee;
}

.message-comments{
    margin:5px 0 5px 30px;
}

.comment{
    padding:7px;
    margin-bottom:5px;
    border:1px solid #eee;
}

.add-comment{
    font-family: arial, sans-serif;
    font-size:13px;
    color:#555;
    padding:7px;
    background: #ddd;
    border-radius:5px;
    float:right;
    cursor: pointer;
}

.add-comment:hover{
    box-shadow:0 0 6px #555;
}

JavaScript

function prev(elem, className){
    var previous = elem.previousSibling;
    while(previous && previous.className != className) 
        previous = previous.previousSibling;
    return previous;
}

function addComment(commentsBlock, text){
    var newComment = document.createElement('DIV');
    newComment.className = "comment";
    newComment.innerHTML = text;
    commentsBlock.appendChild(newComment);
}

var messages = document.getElementById("messages");
messages.onclick = function(e){
    var e = e || window.event,
        t = e.target || e.srcElement;
    if(t.className == "add-comment"){
        var commentsBlock = prev(t, 'message-comments');
        addComment(commentsBlock, "Новый супер-пупер коммент!");
    }
}