JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<script src="https://raw.github.com/bgrins/loremjs/master/lorem.js"></script>

  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" />
 
<a href='#'>+</a>
<div style='height: 20px; background: #333;' id='fake'></div>

<div id="css-table">
    <div class='row'>    
        <div class="col col1">
            <p data-lorem='1'></p>
        </div>
        <div class="col col2">
            <p  data-lorem='3'></p>
        </div>
        <div class="col col3">
            <p></p>
        </div>
        <div class="col col4">
            <p data-lorem='2'></p>
        </div>
    </div>
</div>
<div class='table-controls'></div>

CSS

#css-table { 
    display: table; 
}
#css-table .row {
    display: table-row; 
}

.row:before, .row:after { content: ""; display: table; }
.row:after { clear: both; }
.row { *zoom: 1; }

#css-table .col { 
    display: table-cell; 
    padding: 10px; 
}
#css-table .col1 { 
    width: 5px;
}
#css-table .col2 { 
    width: 100%;
    border: solid 10px orange;
}
#css-table .col3 { 
    width: 40px;
    background: #333;
}
#css-table .col4 { 
    width: 10px;
    background: #eee;
}

/*
.row-add-above{
 position:absolute;
 top:0;
    left: 50%;
 background: green;
 width: 10px;
 height: 10px;
    margin-left: -5px;
display: block;    
}*/
.row-add-below, .row-add-above {
 /*position:absolute;
 bottom:0;
    left: 50%;
    margin-left: -5px;*/
 background: green;
 width: 10px;
 height: 10px;
    position: absolute;
display: block;    
}.row-add-below
{
    background: red;
}

.resize-handle {
    width: 7px;
    height: 7px;
    opacity: .4;
    background-color: #333;
    border: 1px #EEE solid;
    font-size: 1px;
    position: absolute;
}

JavaScript

$(function() {
    var table = $("#css-table");
    $("a").click(function() {
        var newRow = $(".row").eq(0).clone();
        newRow.find("p").empty();
        newRow.prependTo(table);
    
    drawTableControls(table);
    });
    
    
    $(document).on("click", ".row-add-above", function() {
        
        var newRow = $(this).closest(".row").clone();
        newRow.find("p").empty();
        newRow.prependTo(table);
    
        drawTableControls(table);
    });
    /*
    setTimeout(function() {
    drawTableControls(table);
    }, 2000);
    */
    
    $("*").click(function() {
        drawResizeHandles(this);
    });
});

function drawResizeHandles(el) {
   $(".resize-handle").remove();
   //$("<div class='resize-handle ne' />")    
       $( el ).resizable({ handles: 'all' });
}

function drawTableControls(table) {
$(".table-contols").empty();
    table.each(function() {
        var row = this;
        console.log(row, $(row).height(), $(row).outerHeight());
        var addBelow = $("<div class='row-add-below' />").appendTo(".table-controls");
        addBelow.position({
          my: "right center",
          at: "right top",
          of: "#fake"
        });
        var addAbove = $("<div class='row-add-above' />").appendTo(".table-controls");
        addAbove.position({
          my: "center",
          at: "right top",
          of: row 
        });
});
    
//table.find(".row-inner").append("<div class='row-add-below' />");    
//table.find(".row-inner").append("<div class='row-add-above' />");    
}