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;
}

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" style="top:0;">'+$('#val').val()+'</div>');  
    });
});