JSFiddle - React, Tailwind, and code Playground

by Max Poshusta

HTML

<div class="container">
  <div class="sidebar">
      This is some text that overflows outside of the container, but in a more complex world this is the desired behavior acceptable. However, the footer should bump down to be below this overflowing text - the footer should be at the very bottom... 
      
      <a href="#" id="popoverToggle">Show Popover</a>
      <div id="popover" class="popover hidden">
        I am a popover that is hidden on page load, but when a user hovers another element in the sidebar I appear.
        <br/>
        The footer should appear below me!
      </div>
  </div>
  
  <div class="footer">
    <div>
        I'm a footer that should be at the bottom below this text, but I'm not
    </div>
  </div>
</div>

CSS

.container {
  position: absolute;
  height: 100%;
  width: 100%;
}

.sidebar {  
  overflow: visible;
  height: 175px;
  width: 200px;
}

.footer { 
  position: absolute;
  height: 200px;
  width: 100%;
  bottom: 0;
}

.popover {
  height: 500px;
  position: absolute;
  width: 400px;
  z-index: 10;
}

.hidden {
  display: none;
}

/* Not important to the problem statement styles */
.sidebar {
  background-color: lightgrey;
  border: 1px solid grey;
  padding: 0.5em;
  word-wrap: break-word;
}

.popover {
   color: white;
   background-color: blue;
   padding: 1em;
}

.footer {
  background-color: cyan;
}

.footer div {
  width: 100%; 
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}

JavaScript

$(document).ready(function() {
  $('#popoverToggle').on('click', function() {
    $('#popover').removeClass('hidden');
  })
});