JSFiddle - React, Tailwind, and code Playground

HTML

<div class="board"></div>
<table>
    <tr>
        <td>
            <table id="widget-schedule" class="widgets-attributes">
                <tr>
                    <td>left</td>
                    <td>
                        <input type="text" id="widget-left" value="0">
                    </td>
                </tr>
                <tr>
                    <td>bottom</td>
                    <td>
                        <input type="text" id="widget-bottom" value="0">
                    </td>
                </tr>
                <tr>
                    <td>width</td>
                    <td>
                        <input type="text" id="widget-width" value="50">
                    </td>
                </tr>
                <tr>
                    <td>height</td>
                    <td>
                        <input type="text" id="widget-height" value="25">
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table id="widget-clock" class="widgets-attributes">
                <tr>
                    <td>left</td>
                    <td>
                        <input type="text" id="widget-left" value="5">
                    </td>
                </tr>
                <tr>
                    <td>bottom</td>
                    <td>
                        <input type="text" id="widget-bottom" value="30">
                    </td>
                </tr>
                <tr>
                    <td>width</td>
                    <td>
                        <input type="text" id="widget-width" value="50">
                    </td>
                </tr>
                <tr>
                    <td>height</td>
                    <td>
                        <input type="text" id="widget-height" value="25">
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table id="widget-galery" class="widgets-attributes">
                <tr>
        ...

CSS

.board {
    width: 800px;
    height: 400px;
    border: 1px solid black;
    position: relative;
}
.widget {
    border: 2px solid blue;
    background-color: #fafafa;
    position: absolute;
}

.ui-resizable-se {
    background: none;
}

JavaScript

function merge_objects(obj1, obj2) {
    var obj3 = {};
    for (var attr in obj1) obj3[attr] = obj1[attr];
    for (attr in obj2) obj3[attr] = obj2[attr];
    return obj3;
}

function WidgetsEditor() {
    $board = $(".board");
    var radix = 10;
    grid = {
        columns: 200,
        rows: 100
    };
    grid.x = parseInt($board.width() / parseInt(grid.columns, radix), radix);
    grid.y = parseInt($board.height() / parseInt(grid.rows, radix), radix);
    attributes = {
        width: grid.x,
        height: grid.y,
        left: grid.x,
        bottom: grid.y
    };
    preffix = "widget-";
        options = {
        grid: [grid.x, grid.y],
        containment: "parent",
        resize: changeAttributes,
        drag: changeAttributes
    };

    function changeAttributes(event, ui) {
        $t = $(this);
        id = $t.attr("id");
        $("#" + preffix + id + " #" + preffix + "left").val(ui.position.left / grid.x);
        $("#" + preffix + id + " #" + preffix + "bottom").val(parseInt(grid.rows - $t.height() / grid.y - ui.position.top / grid.y, radix));
        $("#" + preffix + id + " #" + preffix + "width").val(parseInt($t.width() / grid.x, radix));
        $("#" + preffix + id + " #" + preffix + "height").val(parseInt($t.height() / grid.y, radix));
    }

    function updateWidget(e) {
        var id = e.attr("id").replace(preffix, "");
        var widget = $("#" + id);
        var value;
        for (var attr in attributes) {
            value = $("#" + preffix + id + " #" + preffix + attr).val() * attributes[attr];
            widget.css(attr, value);
        }
    }
    
    function addWidget($t) {        
        var id = $t.attr("id").replace(preffix, "");
        $new_widget = $("<div id='" + id + "' class='widget'></div>");
        $board.append($new_widget);
        updateWidget($t);
        $t.on("change", function () {
            updateWidget($(this));
        });        
    }

    $(".widgets-attributes").each(function (index) {
   ...