JSFiddle - React, Tailwind, and code Playground

by Trevor Dowdle

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="box1">
		<p>some text</p>
	
	<h1>Other stuff</h1>
	<br><br>
	Another autocomplete:<input id="box2">
			<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

$("#box1").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 ) {
         $(this).parent().css('height','auto');   
     },
     close: function(event, ui ){
         $(this).parent().css('height','750px');    
     }
	});

 $("input#box2").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 ) {
         $(this).parent().css('height','auto');   
     },
     close: function(event, ui ){
         $(this).parent().css('height','750px');    
     }
	});