JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div>
    <div id="cat-1" class="header-category">
        <h3 style="margin-left: 160px;">TITLE 1</h3>
    </div>
    <p style="margin-left: 160px;"><b>SUBTITLE 1</b></p>
    <div class="sub-category-container">
        <div class="sub-category-container" style="width: 200%; height: 60px;">
            <div style="width: 100%; height: 10px; background-color: #eeeeee;">
                DATA1, DATA2, DATA 3, DATA 4, DATA 5, DATA 6, DATA ETC....
            </div>
        </div>
     </div>
</div>

<div>
    <div id="cat-1" class="header-category">
        <h3 style="margin-left: 160px;">TITLE 2</h3>
    </div>
    <p style="margin-left: 160px;"><b>SUBTITLE 2</b></p>
    <div class="sub-category-container">
        <div class="sub-category-container" style="width: 200%; height: 60px;">
            <div style="width: 100%; height: 10px; background-color: #eeeeee;">
   vATA2, DATA 3, DATA 4, DATA 5, DATA 6, DATA ETC....
            </div>
        </div>
     </div>
</div>

<div id="test-container">
    <div id="cat-1" class="header-category">
        <h3 style="margin-left: 160px;">TITLE N</h3>
    </div>
    <p style="margin-left: 160px;"><b>SUBTITLE N</b></p>
    <div class="sub-category-container">
        <div class="sub-category-container" style="width: 200%; height: 60px;">
            <div style="width: 100%; height: 10px; background-color: #eeeeee;">
                DATA1, DATA2, DATA 3, DATA 4, DATA 5, DATA 6, DATA ETC....
            </div>
        </div>
     </div>
</div>

CSS

.measures-container {
    position: absolute;
    z-index: 401;
    height: 100%;
    width: 100%;
    top: 585px;
    bottom: 0px;
    background-color: white;
}

.header-category {
    height: 34px;
    background-color: #EDEDED;
    border-bottom: 1px solid #999999;
}
    
.sub-category-container {
  	width: 100%;
   	overflow: scroll;
}

JavaScript

var subCatContainer = $(".sub-category-container");

subCatContainer.scroll(function() {
    subCatContainer.scrollLeft($(this).scrollLeft());
});