JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left">
    <span>Left</span>
    
</div>
<div id="middle">
    <span>Middle</span>
</div>
<div id="right">
    <span>Right</span>
</div>

CSS

div{
    display:block;
    float:left;
    width:150px;
    height:200px;
    border:solid 1px #000;
    margin-right:10px;
    border-bottom:none;
}
div span{
    display:block;
    border:solid 1px #f00;
    text-align:center;
    padding:5px 0;
    margin:auto;
}
#disk1{
    width:10%;
    
}
#disk2{
    width:20%;
}

#disk3{
    width: 30%;
}

#disk4{
    width: 40%;
}
#disk5{
    width:50%;
    
}
#disk6{
    width:60%;
}

#disk7{
    width: 70%;
}

#disk8{
    width: 80%;
}
#disk9{
    width: 90%;
}

JavaScript

function doTowers(topN, from, inter, to, cbk) {
    if (topN == 1){
        cbk.call(null, topN, from, to);
    }else {
        doTowers(topN - 1, from, to, inter, cbk);
        cbk.call(null, topN, from, to);
        doTowers(topN - 1, inter, from, to, cbk);
    }
}
var step = 1;
var numDisks = 10;

for (var i = numDisks; i > 0; i--){
    $("#left").append('<span id="disk' + i +'">' + i + '</span>');
}

doTowers(numDisks, 'left', 'right', 'middle', function(disk,from,to){
    setTimeout(function(){$("#disk" + disk).appendTo("#" + to);}, 1000 * step++);
});