JSFiddle - React, Tailwind, and code Playground

by orig

HTML

<div class="Container">
    <div class="Content">hygg</div>
    <div class="Selector">hg hg hg hg hg hg</div>
</div>

CSS

div.Container
{
    border: 2px solid #00F;
    width: 500px;
    height: 300px;
    overflow: auto;
    position: relative;
}

div.Selector
{
    position: absolute;
    top: 0px !important;
    left: 80px;
    width: 150px;
    height: 500px;
    border-left: 2px solid #F00;
    border-right: 2px solid #0F0;
    z-index: 10000;
}

div.Content
{
    height: 500px;
    width: 1000px;
    border: 1px solid #DEDEDE;
   background-color: #EFEFEF; 
}


/*
 * jQuery UI CSS Framework 1.8.17
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; }
.ui-helper-clearfix:after { clear: both; }
.ui-helper-clearfix { zoom: 1; }
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*
 * jQuery UI CSS Framework 1.8.17
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 *...

JavaScript

$(document).ready(function() {
    $("div.Selector").resizable();
});