JSFiddle - React, Tailwind, and code Playground

by dru_zod

HTML

<div class="main">
  <div class="one">
    <div>
      test
    </div>
    <div class="float-container">
      <div class="float">
        float
      </div>
    </div>
  </div>
  <div class="two">
    <div class="sticky">
      sticky
    </div>
    <div>
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
      test<br />
    </div>
  </div>
</div>

SCSS

html,
body {
  margin: 0;
}

.main {
  min-height: 100vh;
  background-color: red;
  display: flex;
  flex-direction: column;

  .one {
    background-color: blue;
  }

  ;

  .two {
    margin-top: auto;
    flex: 1;
    background-color: green;
  }
}

.float-container {
  position: relative;

  .float {
    position: absolute;
    top: 0;
    right: 0;
    background-color: yellow;
    height: 10rem;
    z-index: 2000;
  }
}

.sticky {
  position: sticky;
  top: 0;
  background-color: orange;
  z-index: 1000;
}