JSFiddle - React, Tailwind, and code Playground

HTML

<div id="line1">ehmwgzcyoaedeyvckivf</div>
<div id="line2">chacfveyvwdeyoigezkm</div>
<div id="moves">2:u 2:r 2:r 2:r 2:r 2:r 2:r 2:r 2:r 2:r 2:r 2:r 2:r 2:r 2:r 2:r 2:r 2:r 5:u 5:r 5:r 5:r 5:r 5:r 5:r 5:r 5:r 5:r 5:r 5:r 5:r 4:u 4:r 4:r 4:r 4:r 4:r 4:r 4:r 4:r 4:r 4:r 4:r 10:u 10:r 3:u 3:r 3:r 3:r 3:r 3:r 3:r 0:u 0:r 0:r 0:r 0:r 0:r 0:r 15:d 15:l 15:l 15:l 15:l 15:l 15:l 15:l 15:l 15:l 15:l 15:l 15:l 15:l 15:l 15:l 9:d 9:l 9:l 9:l 9:l 9:l 9:l 9:l 19:d 19:l 19:l 19:l 19:l 19:l 19:l 19:l 19:l 19:l 19:l 19:l 19:l 19:l 19:l 19:l 14:d 14:l 14:l 14:l 14:l 14:l 14:l 14:l 14:l 14:l 18:d 18:l 18:l 18:l 18:l 18:l 18:l 18:l 18:l 18:l 18:l 11:d 11:l 13:d 13:l 17:d 17:l 17:l 17:l 6:l 8:r 12:r 16:r 6:l 8:r 12:r 16:r 6:l 8:r 12:r 8:r 12:r 8:r 2:d 5:d 4:d 10:d 3:d 0:d 15:u 9:u 19:u 14:u 18:u 11:u 13:u 17:u</div>

CSS

#line1 {position:absolute;top:100px;}
#line2 {color:gray;position:absolute;top:250px;}
#moves {display:none;}
span   {float:left;font-family:monospace;font-size:50px;position:absolute;width:50px;}

JavaScript

$('div:not(#moves)').each(function(){
    c = $(this).text().split("");
    $this = $(this);
    $this.empty();
    i = 0;
    $.each(c, function(x, y) {
        $this.append("<span>" + y + "</span>");
        $('span').last().css({top: "0px", left: (i++ * 50) + "px"});
    });
});

moves = $('#moves').text().split(" ");    
function animateNextMove() {
    m = moves.shift().split(":");
    if (m[1] == 'l') o = {left:"-=50"};
    if (m[1] == 'r') o = {left:"+=50"};
    if (m[1] == 'u') o = {top:"-=50"};
    if (m[1] == 'd') o = {top:"+=50"};
    
    $('#line1 span:nth-child(' + ++m[0] + ')').animate(o, 125, 'linear', animateNextMove);
}
animateNextMove();