How to get a sticky Scrollbar in CSS / Javascript when scrolling inside nested divs

I have a table over which I need to be able to scroll vertically as a whole. In this table there are 2 columns over which I need to be able to scroll horizontally (individually).
But the 2 horizontal scrollbars disappear at the bottom of the table because of the vertical scrollbar.

How do I get those to be visible at all times?

Here’s the fiddle Example: Fiddle Example

enter image description here

#data {
  background: grey;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  
  height: 400px;
  width: 500px;
}

#splitter {
  display: flex;
  flex-direction: row;
  background: darkgrey;
  overflow-x: hidden;
  overflow-y: auto;
  align-items:start;
}

#right-content {
  background: Gainsboro;
  overflow-x: auto;
  overflow-y: hidden;
}

#left-content {
  background: Gainsboro;
  overflow-x: auto;
  overflow-y: hidden;
}

div {
  margin: 10px;
}

p {
  padding: 2px;
  margin: 0px;
}
<div id="data">
  <div id="splitter">
    <div id="left-content">
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
    </div>
    <div id="right-content">
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>          
    </div>
  </div>
</div>