JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sidebar">This is going to move</div>

CSS

#sidebar {
    background-color : red;
    width            : 240px;
    height           : 100px;
    position         : absolute;
    left             : -180px;
}

JavaScript

//wait for document.ready to fire so elements are available to manipulate
$(function () {

    //setup object to convert the type of event fired to the pixel offset to apply for the event
    var eventToPx = {
        mouseclick : 180,
        mouseleave : -20
    };


    //bind an event handler to the `#sidebar` element for `mouseleave` and `mouseenter`
    $('#sidebar').on('mouseenter mouseleave', function (event) {

        //animate this element's `margin-left` property to the specified number of pixels
        //note that jQuery assumes pixels if you omit units
        $(this).stop().animate({
            marginLeft : eventToPx[event.type]
        }, 500);
    });
});