JSFiddle - React, Tailwind, and code Playground

by Tymoteusz Czech

HTML

<div id="map_container">
    <div id="map_canvas">
    </div>
</div>

CSS

#map_container {
    float: right;
    width: 500px;
    max-width: 150px;
    height: 200px;
    overflow: hidden;
}

#map_canvas {
    width: 500px;
    height: 200px;
    background: #333;
}

JavaScript

$("map_container").on({
    mouseenter: function(){
        $(this).animate({'max-width': 700}, 1000);
    },
    mouseleave: function(){
        $(this).animate({'max-width': 150}, 1000);
    }
});