JSFiddle - React, Tailwind, and code Playground

HTML

<div class="borderbl"><div id="block"></div></div>
<div id="log"></div>

CSS

#block {
    width: 150px;
    height: 150px;
    position: relative;
    background: gray;
}

.borderbl {
    width: 300px;
    height: 300px;
    background: green;
}

JavaScript

$('.borderbl').click(function(e){
    if (e.pageX <= 150) {
        $('#block').stop().animate({
            left: e.pageX
        });
    } else if (e.pageX > 151) {
        $('#block').stop().animate({
            left: 150
        });
    }
});

$('.borderbl').on( "mousemove", function( event ) {
  $( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});