<div class="stick-container">
  <div class="sticky left">
    Sticky Left
  </div>
  <div class="text"> Some text to allow the sticky header to stick! </div>
  <div class="text"> This paragraph will continue to scroll. </div>
  <div class="text"> Another paragraph just to have content to scroll. </div>
  <div class="text"> So many paragraphs to make this scrollable</div>
  <div class="text"> At least one more to make sure we can see</div>
  <div class="sticky right">
    Sticky Right
  </div>
</div>
.stick-container {
  display: flex;
  padding: 8px 0;
  width: 360px;
  height: 200px;
  overflow-x: auto;
  border: 1px solid #333;
}
.sticky {
  position: sticky;
  background-color: #EEE;
  border: 2px dashed black;
  padding: 8px;
}
.left {
  margin: 0 8px 0 0;
  left: 0;
}
.right {
  margin: 0 0 0 8px;
  right: 0;
}
.text {
  border: 2px dashed blue;
  padding: 8px;
  margin: 0 8px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.