JSFiddle - React, Tailwind, and code Playground
HTML
<div class="div-header">
<div class="div-wrapper">
<div class="div-long">
<div class="elem head">Header 1</div>
<div class="elem head">Header 2</div>
<div class="elem head">Header 3</div>
<div class="elem head">Header 4</div>
</div>
</div>
</div>
CSS
.div-header {
position: fixed;
left: 15px;
right: 100px;
top: 20px;
}
.div-wrapper {
overflow: hidden;
height: 57px;
}
.div-long {
width: 5000%;
}
.elem {
position: relative;
width: 250px;
border: 1px solid #000;
padding: 20px;
}
.head {
float: left;
background: #ccc;
}
JavaScript
$(document).ready(function() {
setTimeout(function() {
$('.div-wrapper').scrollLeft(400);
}, 1000);
});