JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<h1>Grid Example</h1>
<div id="mygrid" class="grid">
    <div class="grid-column-title">
        <div class="grid-column-title-inner">
            <div class="grid-cell">
                column 0
            </div>
            <div class="grid-cell">
                Column 1
            </div>
            <div class="grid-cell">
                Column 2
            </div>
            <div class="grid-cell">
                Column 3
            </div>
            <div class="grid-cell">
                Column 4
            </div>
            <div class="grid-cell">
                Column 5
            </div>
            <div class="grid-cell">
                Column 6
            </div>
            <div class="grid-cell">
                Column 7
            </div>
            <div class="grid-cell">
                &nbsp;
            </div>
        </div>
    </div>
</div>

CSS

.grid-cell
{
    border-style: solid;
    border-color: Silver;
    border-width: 0px 1px 1px 0px;
    vertical-align: middle;
    width: 100px;
}
.grid-column-title
{
    float: left;
    display: inline;
    background-color: #F0FFFF;
    overflow: hidden;
    width: 700px;
    border-style: solid;
    border-color: Silver;
    border-width: 1px 1px 0px 0px;
}
.grid-column-title-inner
{
    border-style: solid;
    border-color: Silver;
    border-width: 0px 0px 0px 0px;
    width: 939px;
}
.grid-column-title .grid-cell
{
    float: left;
    display: inline;
    width: 100px;
    vertical-align: middle;
}

JavaScript

var grid = $("#mygrid");
var rowHeight = 50;
 
grid.find(".grid-cell").css("height", rowHeight + "px");
grid.children(":eq(0)").css("height", (rowHeight + 1) + "px");
 
var resizeOpts = { handles: "e" }
var ele = grid.children(":eq(0)").children(":eq(0)").children();
ele.resizable(resizeOpts);