JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <button class="btn">&lt;</button>
    <div class="content">
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>    
        <div class="column"></div>    
        <div class="column"></div>    
        <div class="column"></div>    
        <div class="column"></div>    
        <div class="column"></div>    
        <div class="column"></div>    
    </div>
    <button class="btn">&gt;</button>
</div>

CSS

.container {
    
}

.content {
    width: 300px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space:nowrap;
    height: 40px;
    display: inline-block;
}

.column {
    width: 50px;
    display: inline-block;
    border: 1px solid red;
    height: 20px;
}

.btn {
    width: 30px;
    height: 40px;
    display: inline-block;
    vertical-align: top;
}