JSFiddle - React, Tailwind, and code Playground

HTML

<div class="d-flex gap-3">
  <div class="d-flex flex-column pb-3 flex-shrink-0 justify-end gap-3" style="height: 200x;">
    <span style="height: 21px;">input label 1</span>
    <span style="height: 21px;">input label 2</span>
    <span style="height: 21px;">input label 3</span>
  </div>
  <div class="d-flex gap-3 pa-1" style="overflow-x: auto; scrollbar-gutter: stable both-edges;">
    <div class="d-flex flex-column flex-shrink-0 pa-2 repeated-section-width" style="border: 2px solid black;">
      <div style="margin-bottom: 8px;">
        item info 1
        <br>
        item info 2
        <br>
        item info 3
      </div>
      <div class="d-flex flex-column gap-3">
        <input type="text" />
        <input type="text" />
        <input type="text" />
      </div>
    </div>
    <div class="d-flex flex-column flex-shrink-0 pa-2 repeated-section-width" style="border: 2px solid black;">
      <div style="margin-bottom: 8px;">
        item info 1
        <br>
        item info 2
        <br>
        item info 3
      </div>
      <div class="d-flex flex-column gap-3">
        <input type="text" />
        <input type="text" />
        <input type="text" />
      </div>
    </div>
    <div class="hide-me d-flex flex-column flex-shrink-0 pa-2 repeated-section-width" style="border: 2px solid black;">
      <div style="margin-bottom: 8px;">
        item info 1
        <br>
        item info 2
        <br>
        item info 3
      </div>
      <div class="d-flex flex-column gap-3">
        <input type="text" />
        <input type="text" />
        <input type="text" />
      </div>
    </div>
    <div class="hide-me d-flex flex-column flex-shrink-0 pa-2 repeated-section-width" style="border: 2px solid black;">
      <div style="margin-bottom: 8px;">
        item info 1
        <br>
        item info 2
        <br>
        item info 3
      </div>
      <div class="d-flex flex-column gap-3">
        <input type="text" />
        <input type="text" />
       ...

SCSS

@for $i from 0 through 16 {
  .gap-#{$i} {
    gap: #{$i * 4}#{"px"} !important;
  }
}

@for $i from 0 through 16 {
  .pb-#{$i} {
    padding-bottom: #{$i * 4}#{"px"} !important;
  }
}

@for $i from 0 through 16 {
  .pa-#{$i} {
    padding: #{$i * 4}#{"px"} !important;
  }
}

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-shrink-0 {
  flex-shrink: 0
}

.flex-shrink-1 {
  flex-shrink: 1
}

.justify-end {
  justify-content: flex-end;
}

$repeated-section-width: 170px;

.repeated-section-width {
  width: $repeated-section-width;
}

JavaScript

function hide() {
  for (let el of document.querySelectorAll('.hide-me')) el.style.display = 'none';
}

function show() {
  for (let el of document.querySelectorAll('.hide-me')) el.style.display = 'unset';
}