JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

CSS

.resize_container {
    position: fixed !important;
    top: 65% !important;
    left: 0px !important;
}
.container_t {
    list-style: none;
    bottom: 0px;
    left: 0px;
    height: 100px;
    background-color: red;
    padding: 0;
    margin: 0;
    position:relative;
     display: inline-block;
}

.container_t > li {
    display: inline-block;
    height: 100%;
}

.elem_container {
    list-style: none;
    padding: 0;
    width: 250px;
    height: 100%;
}

.header_t {
    width: 100%;
    height: 35px;
    background-color: blue;
    padding: 5px;
    box-sizing: border-box;
    position:absolute;
}
.content_container_t {
    width: 100%;
    background-color: green;
    padding: 5px;
    box-sizing: border-box;
    position:absolute;
    top:35px;
    bottom:0;
}

.content_t {
    position:absolute;
    width: 90%;
    left: 5px;
    top: 5px;
    bottom: 5px;
}
.ui-resizable-n {
    cursor: n-resize;
    border-top: 5px solid purple;
}
.ui-resizable-e {
    cursor: e-resize;
    border-right: 5px solid purple;
    right: 0;
}

JavaScript

$(function() {

    function generate_element_group() {
        var list_elem = $("<li />");
            var container = $("<ul />", { class: "elem_container" });
                container.resizable({ handles: "e" });
                var header = $("<li />", { class: "header_t" });
                var content_container = $("<li />", { class: "content_container_t" });
                    var content = $("<textarea />", { class: "content_t" });
                content_container.append(content);
            container.append(header);
            container.append(content_container);
        list_elem.append(container);
        return list_elem;
    }

    var resize_container = $("<span />", {class: "resize_container"});
        var container = $("<ul />", { class: "container_t" });
                container.resizable({ handles: "n" });
                container.append(generate_element_group());
                container.append(generate_element_group());
        resize_container.append(container);
    $('body').append(resize_container);
});