JSFiddle - React, Tailwind, and code Playground

CSS

.resize_container {
    position: fixed !important;
    top: 65% !important;
    left: 0px !important;
}
.container_t {
    list-style: none;
    bottom: 0px;
    left: 0px;
    width: 350px;
    height: 150px;
    background-color: red;
    padding: 0;
    margin: 0;
    position:relative;
}
.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;
}
.ui-resizable-n {
    cursor: n-resize;
    border-top: 5px solid purple;
}
ui-resizable-e {
    cursor: e-resize;
    border-right: 5px solid purple;
}

JavaScript

$(function () {
    var resize_container = $("<span />", {
        class: "resize_container"
    });
    var container = $("<ul />", {
        class: "container_t"
    });
    container.resizable({
        handles: "n, e"
    });
    var header = $("<li />", {
        class: "header_t"
    });
    var content_container = $("<li />", {
        class: "content_container_t"
    });
    container.append(header);
    container.append(content_container);
    resize_container.append(container);
    $('body').append(resize_container);
});