Sticky bottom and top react

Question

I have a react/tailwind project where I have a component that I want to be both sticky bottom and top.

In other words, I have an element that I don't want to go off-screen when the user scrolls up or down.

So when at the top of the page, the element is technically off-screen, but I want it to be at the bottom of the screen. And then when the user scrolls, the element should up along with everything else, but when the element reaches the top, I want it to stay there.

Example code:

<div>
  This is the outer most container
  
  <div>
    This is an element that takes up space and pushes elements below
    off-screen
  </div>
  
  <div className="sticky top-0 bottom-0" (this obv. doesn't work)>
    This is the element I want to always stay on screen (sticky top and bot)
  </div>
  
  <div>Other elements</div>
</div>;

I've given it a few tries and googled a bunch but couldn't get anything to work. Thanks in advance!