JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top-div">
  <p>
    lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsumlorem ipsum lorem ipsum lorem ipsum
  </p>
</div>
<div id="bottom-div">
  <table class="w3-table">
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
    </tr>
    <tr>
      <td>
        <div class="show-dropdown"></div>
        <div class="render-this hide-me"></div>
      </td>
      <td>
        <div class="show-dropdown"></div>
        <div class="render-this hide-me"></div>
      </td>
      <td>
        <div class="show-dropdown"></div>
        <div class="render-this hide-me"></div>
      </td>
      <td>
        <div class="show-dropdown"></div>
        <div class="render-this hide-me"></div>
      </td>
      <td>
        <div class="show-dropdown">></div>
        <div class="render-this hide-me"></div>
      </td>
      <td>
        <div class="show-dropdown"></div>
        <div class="render-this hide-me"></div>
      </td>
    </tr>
  </table>

CSS

#top-div {
  width: 500px;
  max-width: 500px;
  border: 1px solid black;
  max-height: 100px;
  overflow-y: auto;
  white-space: nowrap;
}

#bottom-div {
  width: 500px;
  max-width: 500px;
  border: 1px solid black;
  max-height: 100px;
  overflow-y: auto;
  clip-path: inset(-999px 0px -999px 0px)
}

.show-dropdown {
  width: 120px;
  height: 40px;
  background-color: green;
}

.render-this {
  position: absolute;
  z-index: 5;
  width: 20px;
  height: 150px;
  background-color: red;
  transform:
  translateY( calc((100% + 10px)*-1) )
  translateX( calc(var(--scroll-left,0px) * -1) );
}

.hide-me {
  display: none;
}

JavaScript

$('.show-dropdown').click(function() {
  if ($(this).next('.render-this').hasClass('hide-me')) {
    $(this).next('.render-this').removeClass('hide-me');
  } else {
    $(this).next('.render-this').addClass('hide-me');
  }

})
$("#bottom-div").scroll(function(){
	$(this)[0].style.setProperty(
  	"--scroll-left",
    $(this).scrollLeft() + "px"
  );
})