JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="scrollable">
        <div class="item">Item 1</div>
        <div class="item selected">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
        <div class="item">Item 7</div>
        <div class="item">Item 8</div>
        <div class="item">Item 9</div>
        <div class="item">Item 10</div>
        <div class="item">Item 11</div>
        <div class="item">Item 12</div>
        <div class="item">Item 13</div>
        <div class="item">Item 14</div>
        <div class="item">Item 16</div>
        <div class="item">Item 17</div>
        <div class="item">Item 18</div>
        <div class="item">Item 19</div>
        <div class="item">Item 20</div>
    </div>
</div>

CSS

#wrapper {
    width:500px;
    height:500px;
    margin:50px;
}
#scrollable {
    width:200px;
    height:500px;
    overflow-y: visible;
    overflow-x: hidden;
    padding-left:10px;
}
.item {
    width:190px;
    left:10px;
    height: 40px;
    margin-bottom:2px;
    background:#AAA;
    position:relative;
    cursor:pointer;
    /* Fancy animations */
    -webkit-transition:all 0.1s ease-in-out;
    -moz-transition:all 0.1s ease-in-out;
    -o-transition:all 0.1s ease-in-out;
    transition:all 0.1s ease-in-out;
}
.item:hover {
    left:5px;
    background:#CCC;
}
.item.selected {
    left:0px;
    background:#FC0;
}

JavaScript

// Mimic Selection via JS
$('wrapper').addEvent('click', function(e){
    console.log(e);
    if(e.target.hasClass('item')){
        $('wrapper').getElements('.item').removeClass('selected');
        e.target.addClass('selected');
    }
});