JSFiddle - React, Tailwind, and code Playground

by davidxmartins

HTML

<div id='container'>
    <div class='column'>first</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'>last</div>
</div>

CSS

html,body{
    height:100%;
    width:auto;
    padding:0;
    margin:0;
}
body{position:relative;}
#container{
    height:100%; 
    position:relative;
    overflow:hidden;
    background-color:#ddd;
    overflow-x: scroll;
}

.column{ 
    width:100px; 
    height:100%; 
    position:relative;
    border-left: 1px solid #888;
    float:left;
}

JavaScript

var cols = $('.column')
$('#container').width( 10 + cols.length * cols.width() )