JSFiddle - React, Tailwind, and code Playground

by Jayson Buquia

HTML

<div class="bottom">
    <p>This is the bottom</p>
    <div class="top">
        <p>This is the top</p> 
        <div class="bar"> ◄•► </div>
    </div>    
</div>

CSS

.top {
    background: yellow;
     background: url(http://jobmatch.pro/assets/v1/images/logo.png) blue;
}
.top > p {
    display: block;
    height: 300px;
    width: 300px;
    position: absolute;
    top: 0; left: 0;
}
.bottom {
    background: green;
    background: url(http://jobmatch.pro/assets/v1/images/logo.png) black;
}
.top, .bottom {
    width: 300px;
    height: 250px;
    position: absolute;
    top: 0; left: 0;
    text-align: center;
    overflow: hidden;   
    background-size: 300px;
    background-repeat: no-repeat;
    background-position: left center
}
.bar {
    position: absolute;
    padding: 15px 5px;
    border-radius: 10px;
    background: black;
    color: white;
    display: table;
    top: 70%; right:0px;
    cursor: pointer;
    transition: all 0.5s ease;
    -moz-user-select: none;
}
.bar:hover {
    background: red;
}

JavaScript

$(function(){
    var top = $(".top"),
        btm = $(".bottom"),
        bar = $(".bar");
    top.width(280);
    bar.on("mousedown",function(e){
        var xLand = e.pageX,
            xWidth = top.width();
        btm.mousemove(function(f){
            var xMove = f.pageX,
                xDiff = xLand - xMove;
            top.width(xWidth-xDiff);
            btm.mouseup(function(){
                btm.unbind("mousemove");
            });
        });
    });
});