JSFiddle - React, Tailwind, and code Playground

by bnickel

HTML

<div id="a">
    <div>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
</div>
</div>

<div id="b">
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
<button>B</button>
</div>

CSS

html, body {
    width: 100%;
}

#a {
    -webkit-overflow-scrolling: touch;
    overflow-y: hidden;
    overflow-x: scroll;
    
    width: 300px;
    box-sizing: border-box;
    
    border: 5px solid green;
}

#a div {
    white-space: nowrap;
}

button {
    margin: 10px;
    padding: 10px;

position:relative;
top:-5px;
-webkit-transform:translate3d(0,0,0);
}

JavaScript

$('#b button').on('click', function() {
    
    $('#a').slideToggle('slow');
    
    });