JSFiddle - React, Tailwind, and code Playground

by csaltyj

HTML

<div id="container">
</div>
<div id="controls">
    <button id="clone">Add Box</button>
</div>

CSS

body {
    background: #666;
}

#container {
    width: 300px;
    height: 100px;
    overflow: hidden;
    padding: 0;
    background: #fff;
}

.box {
    background: #eee;
    text-align: center;
    float: left;
    padding: 5px;
}

JavaScript

/* Box fitting */

var boxHTML = '<div class="box">Howdy</div>';

$('#clone').click(function() {
    var boxCount = $('.box').length + 1;
    var iWidth = $('#container').width() / boxCount;
    var iHeight = $('#container').height();
    
    $('.box').each(function(i) {
        var padding = parseInt($(this).css('padding-top'));

        $(this).css({
            width: iWidth - padding*2,
            height: iHeight - padding*2
        });
    });
    
    var $box = $(boxHTML).appendTo('#container');
    var padding = parseInt($box.css('padding-top'));
    
    $box.css({
        width: iWidth - padding*2,
        height: iHeight - padding*2
    });
});