JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<app>
    <toolbar>toolbar</toolbar>
    <main>
      <scrollpanel id='left'></scrollpanel>
      <scrollpanel id='right'></scrollpanel>
    </main>
</app>

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
}

app {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  max-height: 100%;
  border: 2px solid red; 
  flex: 1 1 auto;
}

main {
  display: flex;
}

main * {
  flex-grow: 1;
  flex-shrink: 1;
  overflow-y: auto;
}

toolbar {
  background: lightgreen;
}

JavaScript

const lorem	 = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum totam atque praesentium laborum quibusdam alias debitis magni eligendi molestiae, ab quo in distinctio illum assumenda accusamus iure incidunt veniam. Doloribus.'

const left = document.getElementById('left');
const right = document.getElementById('right');

for (let i=0; i < 100; i++) {
  left.append(lorem);
  right.append(lorem);
}