JSFiddle - React, Tailwind, and code Playground

by pixeloco

HTML

<div id="wrap">
    <div class="left">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
    </div>
    <div id="right">
    <div class="block">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
    </div>
     <div class="block">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
    </div>
     <div class="block">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
    </div>
        <div class="block">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
    </div>
        <div class="block">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
    </div>
    <div class="block">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
    </div>
        <div class="block">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
    </div>
        <div class="block">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
    </div>
        <div class="block">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
    </div>
    </div>
</div>

CSS

#wrap {margin: 0 auto;max-width: 800px;border: 4px solid green;}


.left {position:fixed; width: 196px; background: blue; color:white;border-right:4px solid yellow;}

#right {margin-left: 200px;  overflow: auto; white-space: nowrap;}

.block {width: 100px; display: inline-block; background:orange;}
.block:nth-of-type(even) {background: red;}

.one, .two{border-bottom: 1px solid white;}
.one {height: 50px;}
.two {height: 40px;}
.three {height: 80px;}