JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper"> 
 
<div id="head"> 
<textarea cols="72" rows="4" id="val">hello</textarea> 
<div id="button" align="right" style="width:600px;"><input type="button" value="Linkit" id="btn" /> </div> 
</div> 
<div id="contents" style="position:relative;"> 
<div class="link">first</div> 
<div class="link">second</div> 
</div> 
 
</div>

CSS

#wrapper{
    border:#CCCCCC solid 1px;
    height:auto;
    width:900px;
    margin:0 auto;
}
#head{
    margin:20px;
}
#contents{
    margin:20px;
    border:#CCCCCC solid 1px;
    height:400px;
    width:600px;
    margin:0 aut    
}
.link{
    border:#CCCCCC solid 1px;
    margin:5px;
    height:55px;
    position:absolute;
    width:588px;
    top:0;
}

JavaScript

$(document).ready(function() {
    var top = 0;
    $('#contents div').each(function(index, val) {
        $(this).css('top', top + 'px');
        top = top + 61;
    });

    $('#btn').bind('click', function() {
        
        $('#contents div').each(function(index, val) {
            var newtop = parseInt($(this).css('top')) + 61;

            //$(this).css('top',newtop +'px');;
            $(this).animate({
                top: newtop + 'px'
            }, 800, function() {
                //
            });
        });
        $('#contents div:first').before('<div class="link">' + document.getElementById('val').value + '</div>');
    });
})