JSFiddle - React, Tailwind, and code Playground

by stchangg

HTML

<div id="outer">
    <div id="left">
        <div id="a">A</div>
        <div id="b">B</div>
        <div id="c">C</div>
    </div>
    <div id="right">
        right!
    </div>
</div>

CSS

#outer {
    width: 100%;
    height: 300px;
}

#left, #right {
    height: 100%;
    display: inline;
    float: left;
    border: 1px solid red;
    position: relative;
}

#left {
    overflow-x: hidden;
    width: 75%;
}

#right {
    width: 24%;
}

#a, #b {
    position: absolute;
    top: 0px;
    width: 300px;
    height: 100%;
}

#a {
    left: 0px;
    background-color: #eee;
    width: 150px;
}

#b {
    left: 150px;
    background-color: #ccc;
    width: 300px;
}

#c {
    left: 450px;
    background-color: #999;
    width: 450px;
}

JavaScript

$("#a").click( function() {
    $("#left").animate( {"scrollLeft":300}, 1000); 
});

$("#b").click( function() {
    $("#left").animate( {"scrollLeft":0}, 1000);
});