JSFiddle - React, Tailwind, and code Playground

by Matus Benko

HTML

<div id="container">
    <div id="flowLayout">
    </div>
    <div id="rightLayout">
        <a id="addTileButton" href="#">Add Tile</a><br/>
        <a id="removeTileButton" href="#">Remove Tile</a>
    </div>
</div>
<div id="resultGrid">
    ResultGrid is under
</div>

CSS

a {
    color:black;
}

#contaner {
    width: 100%;
}

#rightLayout {
    width: 100px;
    height: 50px;
    float: left;
    background-color: #99f;
    padding: 5px;
    font-size: 12px;
}

#flowLayout {
    float: left;
    min-height: 20px;
    background-color: #f99;
}

#flowLayout .tile {
    float: left;
    height: 15px;
    margin: 2px;
    background-color: #9f9;
    padding: 2px;
    font-size: 12px;
}

#resultGrid {
    clear: both;
    margin-top: 10px;
    width: 100%;
    height: 300px;
    background-color: #ccc;
    padding: 2px;
    font-size: 12px;
    text-align: center;
}

JavaScript

var container = $('container');
var flowLayout = $('flowLayout');
var rightLayout = $('rightLayout');

var flowLWidth = container.getWidth() - rightLayout.getWidth();
flowLayout.setStyle('width',  flowLWidth+'px');

var addTile = $('addTileButton');
var removeTile = $('removeTileButton');
var tileIndex = 0;

addTile.addEvent('click',function(e) {
    var tile = new Element('div', {
        class: 'tile',
        html: 'Tile '+(tileIndex++),
        styles: {
            'width': Number.random(50, 200)+"px"
        }
    });
    tile.inject(flowLayout);
});

removeTile.addEvent('click', function(e){
    var lastTile = flowLayout.getLast('.tile').destroy();
    tileIndex--;
    tileIndex = tileIndex < 0 ? 0 : tileIndex;
});