JSFiddle - React, Tailwind, and code Playground

HTML

<span class="container">
  <div class="button colored" onclick="toggle('left')">Click Me!</div>
  <div class="relative" id="toggleable-left">
    <div class="absolute padded colored">Absolute positioned<br /><br />With padding</div>
  </div>
</span>
<span class="container">
  <div class="button colored" onclick="toggle('right')">Click Me!</div>
  <div class="relative" id="toggleable-right">
    <div class="absolute sized colored">Absolute positioned<br /><br />With width and height</div>
  </div>
</span>

<div class="other-stuff">
  Just some other content to show that the abolute positioned stuff goes on top<br />
  <img src="http://lorempixel.com/600/100/abstract/8/">
</div>

<script>
var open = {
	left: false,
  right: false
}

function setVisibility() {
  document.getElementById("toggleable-left").style.visibility = open['left'] ? 'initial' : 'hidden';
  document.getElementById("toggleable-right").style.visibility = open['right'] ? 'initial' : 'hidden';
}
setVisibility();

function toggle(side) {
	open[side] = !open[side];
  setVisibility();
}
</script>

SCSS

.container .relative {
  position: relative;

  .absolute {
    position: absolute;

    // POSITIONING
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
.padded {
  // SIZE by padding
  padding: 20px 100px;
}

.sized {
  // SIZE by width & height
  width: 200px;
  height: 100px;
}

.container {
  padding: 10px;
  display: inline-block;
  margin-left: 100px;
  text-align: center;

  .button {
    padding: 10px 15px;
  }

}

.colored {
  background-color: dodgerblue;
  outline: 1px solid blue;
  color: crimson;
}
  
.other-stuff {
  margin: 15px auto;
}