JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <h1>Heading</h1>
</header>

<main>
  <section>
    <h1>One</h1>
    <ul>
    </ul>
  </section>
  
  <section>
    <h1>Two</h1>
  </section>
  
  <section>
    <header>
      <h1>Three</h1>
    </header>
    <textarea></textarea>
    <footer>
      <p>Footer</p>
    </footer>
  </section>
</main>

<footer>
  <p>Footer</p>
</footer>

CSS

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}
 
body {  
  display: flex;
  flex-direction: column;
}
 
main {
	display: flex;
	flex-direction: row;
  overflow: hidden;
}
 
main > section {
  overflow-y: auto;
  flex-basis: 10em;
  
  /* Would be better if it were fluid width/shrink to fit, unsupported: */
  /* flex-basis: content; */
} 

main > section:last-child {
  display: flex;
  flex: auto;
  flex-direction: column;  
}

main > section:last-child > textarea {
  flex: auto;  
}

JavaScript

var list = document.querySelector( 'ul' )

for( var i = 0; i < 100; i++ ){
    var li = document.createElement( 'li' )
    li.textContent = i
    list.appendChild( li )
}