JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="container">
  <div class="column type01">
    <h2>position sticky</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum quaerat, quos omnis, voluptatum impedit reprehenderit asperiores molestias provident optio pariatur aspernatur voluptates illo iste! Cumque non quis vero quia reprehenderit distinctio vitae deleniti asperiores, id omnis, repellat architecto, quasi sequi delectus perspiciatis earum ipsam soluta deserunt accusamus. Quae, praesentium, temporibus.</p>
    <h2>position sticky</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum quaerat, quos omnis, voluptatum impedit reprehenderit asperiores molestias provident optio pariatur aspernatur voluptates illo iste! Cumque non quis vero quia reprehenderit distinctio vitae deleniti asperiores, id omnis, repellat architecto, quasi sequi delectus perspiciatis earum ipsam soluta deserunt accusamus. Quae, praesentium, temporibus.</p>
    <h2>position sticky</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum quaerat, quos omnis, voluptatum impedit reprehenderit asperiores molestias provident optio pariatur aspernatur voluptates illo iste! Cumque non quis vero quia reprehenderit distinctio vitae deleniti asperiores, id omnis, repellat architecto, quasi sequi delectus perspiciatis earum ipsam soluta deserunt accusamus. Quae, praesentium, temporibus.</p>
  </div>
  <div class="column type02">
    <h2>position sticky</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum quaerat, quos omnis, voluptatum impedit reprehenderit asperiores molestias provident optio pariatur aspernatur voluptates illo iste! Cumque non quis vero quia reprehenderit distinctio vitae deleniti asperiores, id omnis, repellat architecto, quasi sequi delectus perspiciatis earum ipsam soluta deserunt accusamus. Quae, praesentium, temporibus.</p>
    <h2>position sticky</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum quaerat, quos...

SCSS

.container {
  display: flex;
  gap: 20px;
  margin: 20px;
  .column {
    flex: 1;
    &.type01 {
      overflow: hidden;
    }
    &.type02 {
      position: relative;
      overflow: clip;
      &::before {
        content: '';
        position: absolute;
        top: 0;
        right: -10px;
        width: 200px;
        height: 10px;
        background: red;
      }
    }
    h2 {
      position: sticky;
      top: 0;
      left: 0;
      
      font-weight: bold;
      font-size: 20px;
    }
    p {
      margin-bottom: 30px;
    }
  }
}