JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<article>
  <div class="images">
    <div class="image"></div>
  </div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus modi obcaecati ad excepturi facere beatae incidunt veniam consequuntur cupiditate quae commodi corrupti, voluptates laudantium provident sequi explicabo dolorum soluta libero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. In iste blanditiis cum rerum ducimus odit laboriosam, voluptate nisi fuga harum tempora, accusamus. Cum cumque, magni, libero odio eligendi distinctio laboriosam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus modi obcaecati ad excepturi facere beatae incidunt veniam consequuntur cupiditate quae commodi corrupti, voluptates laudantium provident sequi explicabo dolorum soluta libero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. In iste blanditiis cum rerum ducimus odit laboriosam, voluptate nisi fuga harum tempora, accusamus. Cum cumque, magni, libero odio eligendi distinctio laboriosam.</div>
</article>

<article>
  <div class="images">
    <div class="image"></div>
  </div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus modi obcaecati ad excepturi facere beatae incidunt veniam consequuntur cupiditate quae commodi corrupti, voluptates laudantium provident sequi explicabo dolorum soluta libero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. In iste blanditiis cum rerum ducimus odit laboriosam, voluptate nisi fuga harum tempora, accusamus. Cum cumque, magni, libero odio eligendi distinctio laboriosam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus modi obcaecati ad excepturi facere beatae incidunt veniam consequuntur cupiditate quae commodi corrupti, voluptates laudantium provident sequi explicabo dolorum soluta libero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. In iste blanditiis cum rerum ducimus odit laboriosam, voluptate nisi fuga harum tempora,...

SCSS

article {
  display: flex;
  flex-direction: row;
  padding: 2rem 0;
}

.images, .text {
  flex: 0 0 50%;
}

.image {
  border-top: 10px solid red;
  position: sticky;
  top: 0;
}