JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="layout">
  <div class="a"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="a"></div>
  <div class="b"></div>
  <div class="column">
    <div class="sticky">
      <div class="c"></div>
      <div class="c"></div>
    </div>
  </div>
</div>

CSS

@media (min-width: 40rem) {
  .layout {
    text-align: right;
    font-size: 0;
  }

  .layout > * {
    text-align: unset;
    font-size: unset;
  }
  .layout::after {
    content: "";
    display: block;
    clear: both;
  }
  .a, .b {
    width: calc(66.6666666666% - 0.5rem);
    float: left;
    clear: right;
  }
  .c {
    width: calc(33.333333333% - 0.5rem);
    display: inline-block;
    position: sticky;
    top: 0;
  }
}

.a, .b, .c {
  margin-bottom: 1rem;
}

.a {
  background-color: #666;
  min-height: 400px;
}

.b {
  background-color: #999;
  min-height: 150px;
}

.c {
  background-color: #ccc;
  min-height: 200px;
}