JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

HTML

<div class="resize_container">
    <div class="bar_container">
        <span class="menu">
            <button>+</button>
            <button>+</button>
            <button>+</button>
        </span>
        <span class="content_generator">
            <button>+</button>
        </span>
        <span class="content_generator2">
            <button>+</button>
        </span>
    </div>
</div>

CSS

.resize_container {
    position: fixed !important;
    top: 65% !important;
    left: 0px !important;
    background-color: transparent;
}

.bar_container: {
    box-sizing:border-box;
    position: relative;
    bottom: 0;
    left: 0;
    padding: 0px;
    margin: 0px;
}

.bar_container {
    background-color: purple;
}

.menu {
    display: inline-block;
    height: 100%;
    width: 70px;
    background-color: blue;
}

.content_generator {
    display: inline-block;
    height: 100%;
    background-color: green;
}

.content_generator2 {
    display: inline-block;
    height: 100%;
    background-color: yellow;
}

.ui-resizable-n {
    cursor: n-resize;
    border-top: 5px solid purple;
}

JavaScript

$(".bar_container").resizable({ handles: "n" });