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 class="position-relative">


<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>
</div>

CSS

.position-relative {
  position: relative;
}

#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;

}

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

.render-this {
  position: absolute;
  bottom: 10px;
  z-index: 5;
  width: 20px;
  height: 150px;
  background-color: red;
}
.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');
  }

})