JSFiddle - React, Tailwind, and code Playground

by arondraper

HTML

<div id="container">
    <div id="left">
        <select id="a" multiple size="10">
            <option value="[email protected]">[email protected]</option>
        </select>
        <input id="email" type="text"/>
    </div>
    <div id="middle">
        <a href="#">>></a>
        <a href="#"><<</a>
    </div>
    <div id="right">
         <select id="b" multiple size="10"></select>           
    </div>
</div>

CSS

body{
   padding: 20px;        
}
#container{
   width: 600px;
   padding: 10px;
   min-height: 200px;
   background-color: #e8e8e8;    
}
#left, #middle, #right{
   float: left;    
}
#left, #right{
   width: 250px;            
}
#left select, #right select{
    width: 240px;
}
#middle{
   padding-top: 50px;
   text-align: center;          
}
#middle a{
    color: #000;
    text-decoration: none;
    border: 1px solid #666;
    padding: 5px 12px;
    float: left;
    clear: both;
    margin: 0 10px 5px 0;
}
#email{
  padding: 5px;
  border: 1px solid #666;
  width: 228px;    
}