JSFiddle - React, Tailwind, and code Playground

by xmajox

HTML

<button type="button">Click here to dynamically add a new row</button>
<div id="mainContainer">
    <div class="rowSample">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="rowSample">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

<p>Note: click on each black box to add some text to them. After adding content to all boxes on the row, they fall into place...</p>

CSS

#mainContainer{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.rowSample {
    background-color: gray;
    margin: 5px 0;
    text-align: justify;
    height: 50px;
}
.rowSample > div {
    display: inline-block;
    background: black;
    border: 1px solid yellow;
    width: 50px;
    height: 50px;
    box-sizing:border-box;
    color: white;
}
.rowSample:after{
    content: '';
    width: 100%;
    display: inline-block;
}

JavaScript

$("button").click(function(){
    var row = $("<div />").addClass("rowSample");
    for(var i = 0; i <=3; i++){
        $("<div />").appendTo(row).before(" ");
    }
    row.appendTo("#mainContainer");
});

$("#mainContainer").on("click",".rowSample > div",function(){
    $(this).text("test");
});