JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
    <div ng-repeat="item in items">
        <div id="cat-1" class="header-category">
            <h3 style="margin-left: 160px;">{{item.title}}</h3>
        </div>
        <p style="margin-left: 160px;"><b>{{item.subtitle}}</b></p>
        <div class="sub-category-container">
            <div 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>

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());
});


var myApp = angular.module('MyApp',[])
myApp.controller('MyController', function($scope) {
    $scope.items = [
        { 
            title: "TITLE 1",
            subtitle: "SUBTITLE 1",
            value: "DATA1, DATA2, DATA 3, DATA 4, DATA 5, DATA 6, DATA ETC...."
        },{
            title: "TITLE 2",
            subtitle: "SUBTITLE 2",
            value: "DATA1, DATA2, DATA 3, DATA 4, DATA 5, DATA 6, DATA ETC...."
        },{ 
            title: "TITLE 3",
            subtitle: "SUBTITLE 3",
            value: "DATA1, DATA2, DATA 3, DATA 4, DATA 5, DATA 6, DATA ETC...." 
        },{ 
            title: "TITLE 4",
            subtitle: "SUBTITLE 4",
            value: "DATA1, DATA2, DATA 3, DATA 4, DATA 5, DATA 6, DATA ETC...." 
        }
    ];
});