JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="content">
    <input value="1">
    <input value="2">
    <input value="3">
    <input value="4">
    <input value="5">
  </div>
</div>
<div class="container">
  <div class="content">
    <span>jdshfgikufdsgoifudvldsjfbvosidufgyhprisuhgiprdbvipdugyhpsiruhgpsdjhgipfdsjhgbipsduhgrpsiughbskljdfbvkdjsfhgprsiughdlkfsjhgri</span>
  </div>
</div>
<button id="btn-left"> left </button>
<button id="btn-right"> right </button>

CSS

.container {
  width: 300px;
  overflow: hidden;
  position: relative;
}
.content {
  position: relative;
  height: 100%;
  display: flex;
}

JavaScript

let pos = 0

$( document ).ready(() => {

    $('#btn-left').click(() => {
    	pos-=30
    	$('.content').css('left', pos +'px')
    })
    
    $('#btn-right').click(() => {
    	pos+=30
    	$('.content').css('left', pos +'px')
    })
});