JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="line"></div>
    
<div id="click"><p>click to move</p></div>
    
</body>

CSS

#line {
    position: absolute;
    top: 100px;
    left:0px;
    width: 100%;
    height: 4px;
    background: #000;
}

#click {cursor:pointer;}

JavaScript

$('#click').click(function () {
    
    var windowHeight = $(window).height();
    var lineHeight = $('#line').height();
    var desiredBottom = 100;
    
    var newPosition = windowHeight - (lineHeight + desiredBottom);
    
    $('#line').animate({top:newPosition},1000,function () {
        $('#line').css({
            bottom: desiredBottom,
            top: 'auto'
        });
    });
  
});