JSFiddle - React, Tailwind, and code Playground

by brandondurham

HTML

<div class="scroller">
  <div class="column-one">
    Column One
    <br><br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.
  </div>
  <div class="column-two">
    Column Two
    <br><br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
    Content.<br>
  </div>
</div>

CSS

.scroller {
  align-items: flex-start;
  box-shadow: inset 0 0 0 6px violet;
	display: flex;
	flex-direction: row;
	max-height: 250px;
	overflow-y: auto;
	padding: 36px 24px;
}

.column-one {
  box-shadow: inset 0 0 0 6px red;
  width: 50%;
}

.column-two {
  box-shadow: inset 0 0 0 6px red;
  width: 50%;
}