JSFiddle - React, Tailwind, and code Playground

by Luckypouet

HTML

<div class="container">
  <div class="top">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam quos, assumenda optio reiciendis in eos, dolorum. Quod doloremque minus cum aut modi ex at facere repellat rerum quia id enim quibusdam distinctio sed eos, totam doloribus. Nam, quia nemo tenetur maiores consectetur impedit, hic assumenda velit neque libero amet eaque!</div>
  <div class="left">Images</div>
  <div class="right">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam possimus aut veritatis inventore debitis ullam ducimus quaerat beatae, nemo assumenda nisi officia voluptatibus aliquam accusamus voluptatem. Dolores iure tenetur architecto, quo odit nam maxime illo explicabo vero ex qui reiciendis velit esse voluptate. Assumenda magni eveniet placeat in eligendi omnis, cum impedit ratione quos reiciendis asperiores quibusdam suscipit incidunt! Ut non, eius, cumque perferendis molestias aspernatur atque molestiae reiciendis, sapiente reprehenderit cum odio corporis! Consectetur expedita delectus iste enim minima ab unde facilis, repudiandae totam explicabo quia laudantium reprehenderit magni eos sequi quibusdam ducimus temporibus fugit dicta. Doloremque, laborum, minima voluptate magni aperiam quisquam eveniet dolore dolorum ipsum aliquid tempora quaerat modi eligendi maiores hic dolor tempore, laudantium porro. Dolorem architecto aliquam impedit voluptatem excepturi. Itaque officiis, repellat cumque totam. Pariatur, ex. Voluptas debitis, ullam similique maiores possimus. Mollitia cum autem beatae nisi voluptatem hic, quas? Nisi eum, esse error.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam possimus aut veritatis inventore debitis ullam ducimus quaerat beatae, nemo assumenda nisi officia voluptatibus aliquam accusamus voluptatem. Dolores iure tenetur architecto, quo odit nam maxime illo explicabo vero ex qui reiciendis velit esse voluptate. Assumenda magni eveniet placeat in eligendi omnis, cum...

CSS

*{
  box-sizing: border-box;
}
.container{
  display: flex;
  flex-wrap: wrap;
}
.top {
  width: 100%;
  padding: 50px 0;
}
.left{
  width: 20%;
  height: 50px;
  background: #FFC;
  position: sticky;
  top: 0;
}
.right{
  width: 80%;
  padding: 0 0 0 50px;
}
.yet-another-block{
  padding: 50px 0;
}