JSFiddle - React, Tailwind, and code Playground

HTML

<div class="horizonal-wrapper">
  <div class="horizonal-content">
    <div class="content-1"></div>
    <div class="content-2"></div>
    <div class="content-3"></div>
  </div>
</div>

CSS

.horizonal-wrapper {
    height: 100vh;
    width: 100%;
    overflow-y: scroll;
}

.horizonal-content {
   width: max-content;
   border: 1px solid;
}

.content-1,
.content-2,
.content-3 {
 width: 50vw;
 height: 100vh;
 float: left;
 border: 1px solid red;
}

JavaScript

$('.horizonal-wrapper').on('wheel', function(e){

   e.preventDefault();
   $(this).scrollLeft($(this).scrollLeft() + e.originalEvent.deltaY);
});