JSFiddle - React, Tailwind, and code Playground

by wiktor0985

HTML

<div id="container">
			<ul id="lists">
				<li id="main">
					<ul>
					   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
						<li>Aliquam tincidunt mauris eu risus.</li>
						<li>Vestibulum auctor dapibus neque.</li>
						<li>Nunc dignissim risus id metus.</li>
						<li>Cras ornare tristique elit.</li>
						<li>Vivamus vestibulum nulla nec ante.</li>
						<li>Praesent placerat risus quis eros.</li>
						<li>Fusce pellentesque suscipit nibh.</li>
						<li>Vestibulum commodo felis quis tortor.</li>
						<li>Ut aliquam sollicitudin leo.</li>
						<li>Cras iaculis ultricies nulla.</li>
						<li>Donec quis dui at dolor tempor interdum.</li>
						<li>Vivamus molestie gravida turpis.</li>
						<li>Fusce lobortis lorem at ipsum semper sagittis.</li>
						<li>Nam convallis pellentesque nisl.</li>
						<li>Integer malesuada commodo nulla.</li>
						<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
						<li>Aliquam tincidunt mauris eu risus.</li>
						<li>Vestibulum auctor dapibus neque.</li>
						<li>Nunc dignissim risus id metus.</li>
						<li>Cras ornare tristique elit.</li>
						<li>Vivamus vestibulum nulla nec ante.</li>
						<li>Praesent placerat risus quis eros.</li>
						<li>Fusce pellentesque suscipit nibh.</li>
						<li>Vestibulum commodo felis quis tortor.</li>
						<li>Ut aliquam sollicitudin leo.</li>
						<li>Cras iaculis ultricies nulla.</li>
						<li>Donec quis dui at dolor tempor interdum.</li>
						<li>Vivamus molestie gravida turpis.</li>
						<li>Fusce lobortis lorem at ipsum semper sagittis.</li>
						<li>Nam convallis pellentesque nisl.</li>
						<li>Integer malesuada commodo nulla.</li>
						<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
						<li>Aliquam tincidunt mauris eu risus.</li>
						<li>Vestibulum auctor dapibus neque.</li>
						<li>Nunc dignissim risus id metus.</li>
						<li>Cras ornare tristique elit.</li>
						<li>Vivamus vestibulum nulla nec...

CSS

html, body {
    height: 100%; 
}

#container{
	height:90%;
	overflow: scroll;
	width:100%;
	position:relative;
}

#main{
	position: absolute;
	left:0;
	z-index: 2;
}
#lists{
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
}

#lists>li{
	float: left;
	list-style: none;
}

#lists>li ul{
	padding:0;
	margin: 10px;
	background: #fff;
}

#lists li ul li{
    list-style: none;
    border: 1px solid black;
    padding: 3px;
    margin: 0;
}

JavaScript

var totalWidth = 0;
		$('#lists>li').each(function(index) {
			totalWidth += parseInt($(this).width(), 10);
		});
		
   $('#lists').width(totalWidth);

    
		$('#lists>li').first().next().css("margin-left",$('#lists>li').first().width());
		
		$('#container').scroll(function() {
			$('#main').css('left', $(this).scrollLeft());
		});