JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<div class="column">
		<!-- First column content -->
    col 1
	</div>
	<div class="column">
		<!-- Second column content -->
    col 2
	</div>
	<div class="column">
		<!-- Third column content -->
    col 3
	</div>
</div>

CSS

.column {
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px;
}

.column:first-child,
.column:last-child {
  width: 25%;
  min-width: 300px;
}

.column:nth-child(2) {
  width: 50%;
  min-width: 600px;
}