JSFiddle - React, Tailwind, and code Playground
HTML
<div class="background">
<div class="container">
<div class="left">
<h2>Left Column</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a massa bibendum, placerat sapien ultrices, molestie sem. Nam porttitor risus fringilla purus consectetur egestas. Sed elit arcu, eleifend eget velit at, rutrum cursus metus. Suspendisse sollicitudin orci leo, ac tristique nisi porta nec. Etiam at dui at turpis commodo congue nec vel turpis. Aliquam a libero sit amet lorem consectetur aliquet a vehicula nulla. Donec porta suscipit libero, at finibus nisi lacinia id. Quisque mattis magna interdum, tincidunt lacus vel, sodales ligula. Ut volutpat vestibulum justo non semper. Vivamus dictum mollis dignissim. Nullam condimentum venenatis metus sit amet commodo. Suspendisse potenti. Aliquam ac suscipit eros.
Etiam metus elit, varius et feugiat quis, pellentesque elementum nibh. Morbi gravida sodales velit. Vestibulum sed turpis diam. Phasellus sed malesuada ante, id ornare augue. Integer faucibus risus sed dolor tincidunt maximus ac gravida libero. Pellentesque malesuada orci non tortor sodales ultrices. Etiam dolor eros, tempus id luctus nec, commodo et purus. Suspendisse lacus nisl, tincidunt eu diam eu, eleifend ultricies ligula. Nam velit justo, fermentum sit amet laoreet ac, consectetur ut dui. Quisque lobortis dictum justo, id fringilla ipsum scelerisque vel.
Nulla a molestie sapien. Aenean varius dui lacus, tempor malesuada erat tincidunt luctus. Nam quis consectetur nisi, ut gravida mauris. Vivamus eu placerat magna, nec eleifend nibh. Phasellus iaculis congue dui, sodales dignissim nunc sollicitudin in. Cras ultricies erat id aliquam dignissim. Cras in purus malesuada, vulputate dolor vel, congue dui. Pellentesque accumsan, leo volutpat molestie tempor, odio libero ultricies ligula, quis aliquam purus neque a elit. Vestibulum sollicitudin placerat ullamcorper. Cras vel lorem eu ipsum sollicitudin rhoncus in et nisl. Cras...
CSS
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.background {
background-color: #f8f8f8; /* Background color for the entire page */
height: 100%;
}
.container {
display: flex;
justify-content: space-between; /* Separate the columns */
margin: 5px; /* Add margin for visual separation */
}
.left, .right {
flex: 0 0 40%;
background-color: #fff; /* Background color for columns */
padding: 20px; /* Add padding for content */
}
.left {
margin-top: 10px; /* Add margin-top to separate from content above */
}
.right {
margin-top: 30px;
margin-left: 20px; /* Add margin-left to separate from left column */
flex: 1;
overflow-y: auto; /* Enable vertical scrolling */
}
.right-col {
display: flex;
flex-direction: column;
align-items: flex-start;
height: 100vh;
}