JSFiddle - React, Tailwind, and code Playground
HTML
<div class="root">
<div id="Header">
<div class='heading'> Test </div>
</div>
<div class='box' id="Wrapper">
<div class='box' id="Leftpanel">
<p>some text</p>
<h1>Other stuff</h1>
<br><br>
Autocomplete box:<input id="surname">
<p>some text</p>
<h1>Other stuff</h1>
<br><br>
Another autocomplete:<input id="name">
<p>some text</p>
<h1>Other stuff</h1>
<br><br>
<p>some text</p>
<h1>Other stuff</h1>
<br><br>
<p>some text</p>
<h1>Other stuff</h1>
<br><br>
<p>some text</p>
<h1>Other stuff</h1>
<br><br>
<p>some text</p>
<h1>Other stuff</h1>
<br><br>
</div><!--Leftpanel-->
<div class='box' id="Rightpanel">
<form>
<textarea rows="33" cols="45"></textarea><br>
</form>
</div><!--End rightpanel-->
</div><!--wrapper-->
</div><!--root-->
CSS
.box { float: left; }
#root { max-width: 1200px; margin: 0 auto; }
#Header {
width: 97%;
background-color: #313236;
margin-bottom:1%;
padding: 1%;
margin: 0.5%;
-moz-border-radius: 2px;
border-radius: 5px;
}
.heading {
color: #FFF4CB;
font-size: 28px;
padding-bottom: 5px;
}
#Wrapper {
width: 100%;
display: table;
}
#Leftpanel, #Rightpanel {
vertical-align: top;
}
#Leftpanel {
width: 57%;
display: table-cell;
height:750px;
color: #B29D72;
overflow:scroll;
background-color: #272F44;
-moz-border-radius: 2px;
border-radius: 5px;
padding: 1%;
margin:0.5%
}
#Leftpanel .titles{
font-size: 20px;
color: #E5B555;
}
#Rightpanel {
width: 37%;
display: table-cell;
height: 750px;
color: #B2A283;
background-color: #0D162C;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 1%;
margin:0.5%
}
#Rightpanel .titles{
font-size: 20px;
color: #E5B555;
}
#Sidebar {
width: 15%;
background-color: #B2A283;
color: #0D162C;
padding:1%;
margin:0.5%;
-moz-border-radius: 2px;
border-radius: 5px;
}
#Sidebar a:link {
color: #FFF4CB;
}
#Footer {
width: 97%;
height: auto;
background-color: #B2A283;
color: #0D162C;
padding: 1%;
margin: 0.5%;
-moz-border-radius: 2px;
border-radius: 5px;
}
#Footer a:link {
color: #FFF4CB;
padding-left: 5px;
padding-right: 5px;
}
#Footer A:hover {
color: #CA9221;
}
#Sidebar .slide-out-div {
padding: 20px;
width: 250px;
background: #ccc;
border: 1px solid #29216d;
}
JavaScript
var scrollPosition = -1;
var lastScrollTop = 0;
$("[id^=box]").autocomplete({
source: ['Skull,Nasal', 'Skull,Lacrimal', 'Skull,Inferior Nasal Concha', 'Skull,Maxiallary', 'Skull,Zygomatic', 'Skull,Temporal', 'Skull,Palatine', 'Skull,Parietal', 'Skull,Malleus', 'Skull,Incus', 'Skull,Stapes', 'Skull,Frontal', 'Skull,Ethmoid', 'Skull,Vomer', 'Skull,Sphenoid', 'Skull,Mandible', 'Skull,Occipital', 'Rib 1', 'Rib 2', 'Rib 3', 'Rib 4', 'Rib 5', 'Rib 6', 'Rib 7', 'Rib 8 ', 'Rib 9 ', 'Rib 10 ', 'Coccyx'],
open: function( event, ui ) {
scrollPosition = $('#Leftpanel').scrollTop();
},
close: function(event, ui ){
scrollPosition = -1;
}
});
$('#Leftpanel').scroll(function(event){
var st = $(this).scrollTop();
if(scrollPosition != -1){
$('#Leftpanel').scrollTop(scrollPosition);
if (st > lastScrollTop){
$(window).scrollTop($(window).scrollTop()+st-lastScrollTop);
}
}
lastScrollTop = st;
});