How do I make a div width draggable?

Question

I have a div nested inside another div which is used to display a settings console. The nested div has a fixed positioned inside the parent as follows:

I'd like to add a draggable handle to the child div's left border so that the child div can be resized on the width. Do I need to add another very narrow div where the left hand border is positioned so that this can be dragged and the position recalculated to dynamically resize the child divs width property?

I'd rather stick to vanilla JQuery if possible rather than relying on JQuery UI.

Answer 1

I think this is what you're looking for

handles: Which handles can be used for resizing.

Example: $( ".selector" ).resizable({ handles: "n, e, s, w" });

HTML:

<div class="parent">
    <div class="child"></div>
</div>

CSS:

.parent {
    position: relative;
    width: 800px;
    height: 500px;
    background: #000;
}
.child {
    position: absolute;
   right: 0;
    top: 0;
    width: 200px;
    height: 100%;        
    background: #ccc;
}

JS:

$('.child').resizable({
    handles: 'n,w,s,e',
    minWidth: 200,
    maxWidth: 400
});

check this JSFiddle

EDIT: Solved the css issue, Updated fiddle