JSFiddle - React, Tailwind, and code Playground

HTML

<div class='headline'>
    <div>Titel 1</div>
    <div>Titel 2</div>
    <div>Titel 3</div>
    <div>Titel 4</div>
</div>

<div id="scrollWrapper">
	<div id="scroll">
      <div class='listitem'><div>aContent 1</div><div>Content 2</div><div>Content 3</div><div>Content 4</div></div>
      <div class='listitem'><div>bContent 1</div><div>Content 2</div><div>Content 3</div><div>Content 4</div></div>
      <div class='listitem'><div>cContent 1</div><div>Content 2</div><div>Content 3</div><div>Content 4</div></div>
      <div class='listitem'><div>dContent 1</div><div>Content 2</div><div>Content 3</div><div>Content 4</div></div>
      <div class='listitem'><div>eContent 1</div><div>Content 2</div><div>Content 3</div><div>Content 4</div></div>
      <div class='listitem'><div>fContent 1</div><div>Content 2</div><div>Content 3</div><div>Content 4</div></div>
      <div class='listitem'><div>gContent 1</div><div>Content 2</div><div>Content 3</div><div>Content 4</div></div>
      <div class='listitem'><div>hContent 1</div><div>Content 2</div><div>Content 3</div><div>Content 4</div></div>
      <div class='listitem'><div>iContent 1</div><div>Content 2</div><div>Content 3</div><div>Content 4</div></div>
      <div class='listitem'><div>jContent 1</div><div>Content 2</div><div>Content 3</div><div>Content 4</div></div>
      <div class='listitem'><div>kContent 1</div><div>Content 2</div><div>Content 3</div><div>Content 4</div></div>
      <div class='listitem'><div>lContent 1</div><div>Content 2</div><div>Content 3</div><div>Content 4</div></div>
      <div class='listitem'><div>mContent 1</div><div>Content 2</div><div>Content 3</div><div>Content 4</div></div>
      <div class='listitem'><div>nContent 1</div><div>Content 2</div><div>Content 3</div><div>Content 4</div></div>
      <div class='listitem'><div>oContent 1</div><div>Content 2</div><div>Content 3</div><div>Content 4</div></div>
      <div class='listitem'><div>pContent 1</div><div>Content 2</div><div>Content...

CSS

.headline{ position:relative; width:100%; border-bottom:3px double #222; height:28px; margin-bottom:5px;}
.headline div{ float:left; width:calc(25% - 21px); padding:5px 10px; height:18px; border-right:1px dotted #222;}
.headline div:last-child{ width:calc(25% - 20px); border-right:0px;}

.listitem{ position:relative; width:100%; border-bottom:1px solid #999; height:24px;}
.listitem div{ float:left; width:calc(25% - 21px); padding:3px 10px; height:18px; border-right:1px dotted #999;}
.listitem div:last-child{ width:calc(25% - 20px); border-right:0px;}

#scrollWrapper {
	overflow: hidden;
	position: relative;
	height: 200px;
	border: 1px solid black;
  border-top:0px;
}
#scroll {
	overflow: auto;
	height: 100%;
	padding-right: 30px;
	margin-right: -30px;
}

JavaScript

var timeout = false;

document.getElementById("scroll").onscroll = function(){
	window.clearTimeout(timeout);
	this.style.paddingRight = this.style.marginRight= "0px";
	
	var This = this;
	window.setTimeout(function(){
		This.style.paddingRight = This.style.marginRight= "";
	}, 2000);
}