css - How should I approach a "Split Screen" design? -

i need design website split 2 "scrollable" halves. there left side , right side. both need scroll independently of each other.

how should approach this? not well-versed in javascript , use css approach if possible. pure javascript or jquery okay last resort.

this applies large tablets , desktops, layout resort 2 static buttons on mobile devices.

edit: have edited following fiddle cant seem "hide" vertical scroll bars. want maintain design below still have independent scroll functionality.

fiddle

html, body { overflow: hidden; }  div.container { height: 100vh; width: 49%; display: inline-block; background-color: #ccc; overflow-y: hidden; padding: 0; }  .section { height: 100vh; overflow: auto; }`