JSFiddle - React, Tailwind, and code Playground

HTML

<div class="input">
    <input type="text" size="50" id="test_input">
    <input type="submit" value="send" id="test_submit">
</div>

<ul>
    <li class="clear">
        <div class="comment">
           <div class="image">
            <img src="http://www.chooseby.info/materiale/Alcantara-Black_granito_nero_naturale_lucido_3754.jpg">
           </div>
           <div class="info">
             <div class="name">Name</div>
             <div class="text">text</div>
             <div class="timestamp">timestamp</div>
           </div>
        </div>
    </li>
</ul>

CSS

.input {
    margin: 10px;
}

.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

ul {
    margin-top: 15px;
}

ul li {
    padding: 10px 0;
    border-bottom: 1px solid black;
}

ul li .image {
    float: left;
    padding-right: 10px;
    height: 50px;
}

ul li .info {
}

ul li .name a {
    color: black;
    font-weight: bold;
    font-size: 14px;
}

ul li .text {
    font-size: 14px;
    color: black;
}

ul li .image img {
    width: 50px;
    height: 50px;
}

ul li .timestamp {
    font-size: 11px;
    padding-top: 5px;
}

JavaScript

$(document).ready(function() {
    $("#test_submit").click(function() {
        $.post('/echo/json/', function(data) {
            last = $("ul li:first-child");
            new_line = last.clone();
            new_line.hide();
            last.before(new_line);
            new_line.slideDown('slow');
        });

        return false;
    });
});