JSFiddle - React, Tailwind, and code Playground

HTML

<div class="DivDataMain">
    
    <div id="left">left</div>
    <div id="midleBody">
    <p>The content of the midle body
       content of the midle body The content of the midle body</p>
    </div>
    <div id="right">right</div>
    
</div>

CSS

.DivDataMain {
    width:100%;
    overflow:hidden;
    display:block; 
    background:#000; 
    height:400px; 
    margin:auto;
    position: relative;
}

#left {
    width:60px;
    overflow:hidden;
    display:block;
    background:rgba(204, 204, 204, 0.5); 
    height:200px;
    float:left; 
    clear:none; 
    position:fixed; 
    z-index:2;}

#right {
    width:60px;
    overflow:hidden;
    display:block;
    background:rgba(204, 204, 204, 0.5); 
    height:200px;
 
    clear:none;
    right: 0;
    position:fixed;
    z-index:2;}

#midleBody {
    width:90000px;
    overflow:hidden;
    display:block;
    background:#CFC;
    height:200px;
    float:left; 
    clear:none; 
     position:relative; 
    z-index:1;
}

JavaScript

$(document).ready(function () {
           $("#left").click(function () { 
           var leftPos = $('.DivDataMain').scrollLeft();
           $("#midleBody").animate({scrollLeft: leftPos + 250}, 600);
      });   
                    
           $("#right").click(function () { 
           var leftPos2 = $('.DivDataMain').scrollLeft();
           $("#midleBody").animate({scrollLeft: leftPos2 - 250}, 600);
      });   
           });