JSFiddle - React, Tailwind, and code Playground

by Nico

HTML

<div id="wrapper">
    <div id="content">
        <h3>Main content</h3>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam est ac dolor auctor vestibulum. Duis tristique metus non diam pulvinar et vehicula elit venenatis. Aliquam vel convallis tellus. Aliquam erat volutpat. Ut venenatis, ligula ut aliquam imperdiet, quam nisl ultricies leo, eu laoreet arcu erat nec ante. Praesent ullamcorper faucibus dapibus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam est ac dolor auctor vestibulum. Duis tristique metus non diam pulvinar et vehicula elit venenatis. Aliquam vel convallis tellus. Aliquam erat volutpat. Ut venenatis, ligula ut aliquam imperdiet, quam nisl ultricies leo, eu laoreet arcu erat nec ante. Praesent ullamcorper faucibus dapibus.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam est ac dolor auctor vestibulum. Duis tristique metus non diam pulvinar et vehicula elit venenatis. Aliquam vel convallis tellus. Aliquam erat volutpat. Ut venenatis, ligula ut aliquam imperdiet, quam nisl ultricies leo, eu laoreet arcu erat nec ante. Praesent ullamcorper faucibus dapibus.</p>
        <p>Vivamus metus lacus, iaculis eget varius quis, ultrices in mi. Curabitur ut nisl libero. Nunc lobortis pellentesque mauris rhoncus rutrum. Proin nec auctor augue. Aliquam erat volutpat. Curabitur libero sapien, blandit vel ultrices sed, accumsan fringilla erat. Pellentesque consequat neque eu eros elementum ac consectetur sapien gravida. Phasellus sit amet purus vel turpis feugiat porttitor.</p>
        <p>Sed mollis, ligula in vulputate dapibus, urna arcu dictum leo, ac semper nisi risus elementum elit. Aliquam euismod lacus massa. Morbi fermentum mattis faucibus. Aenean ultrices, enim non pulvinar dictum, nibh orci tempor quam, a pretium augue quam sed lectus. Nullam auctor, nunc a dignissim pretium, lacus mauris dictum elit, et faucibus risus augue id risus. Curabitur mollis...

CSS

html, body {
    height: 100%;
}
html, body, * {
    padding: 0;
    margin: 0;
}
p, h3 {
    padding: 1em 0 .5em 0;
}

#wrapper {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}
#content {
    position: relative;
    left: 50%;
    margin-left: -350px;
    width: 440px;
}
#sidebar {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: 100px;
    width: 250px;
    max-height: 100%;
    overflow: hidden;
}
#sidebar:hover {
    overflow-y: auto;
}
#sidebar>* {
    max-width: 225px; /* leave some space for vertical scrollbar */
}