JSFiddle - React, Tailwind, and code Playground

by cutsomeat

HTML

<div id="sk">
    <div id="main">
        <div class="itemWrap">
            <div class="itemTitle">Group 1 Title</div>
            <div class="item">Item 1</div>
            <div class="item">Item 2</div>
        </div>
        <div class="itemWrap">
            <div class="itemTitle">Group 2 Title</div>
            <div class="item">Item 1</div>
            <div class="item">Item 2</div>
        </div>
    </div>
    <div id="handle" class="ui-corner-right">
        <div id="innerHandle" class="ui-corner-all element"></div>
    </div>
</div>

CSS

#sk {
    width: 200px;
    height: 100px;
    background-color: #ccc;
    display: table;
}
#main {
    float: left;
    width: calc(100% - 16px);
    height: 100%;
    background-color: Pink;
    overflow: auto;
    display: table-cell;
}
#handle {
    float: right;
    width: 16px;
    height: 100%;
    background-color: Blue;
    display: table-cell;
    
}
#innerHandle {
    width: 6px;
    height: 80px;
    background-color: #ccc;

}
.element {
  position: relative;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.itemWrap {}
.itemTitle { font-weight: bold; padding: 4px; background-color: #dcd; }
.item { padding: 2px 2px 4px 10px; }