JSFiddle - React, Tailwind, and code Playground

HTML

<div class="columns">
<p>Start of first paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. End of first paragraph.</p>
<p>Start of second paragraph. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. End of second paragraph.</p>
</div>

CSS

.columns {
  columns: 200px auto;
  height: 200px;
  width: 200px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  font-size: 20px;
  border: 1px solid black;
}

p {
  scroll-snap-align: center;
}