JSFiddle - React, Tailwind, and code Playground

by maremp

HTML

<button>Add element</button>
<div>
    <ul id="first">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul id="second">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<button>Add element</button>

CSS

div {
    width: 450px;
    padding: 4px;
    border: 2px solid gray;
    overflow: auto;
}
ul {
    vertical-align:top;
    display:inline-block;
    margin:0;
    padding:0;
}
li {
    background-image:url(http://placehold.it/200x300);
    width:200px;
    height:300px;
    display:block;
    text-decoration:none;
    border:2px solid gray;
    margin-top:10px;
}
ul:first-child li:nth-child(even), ul:last-child li:nth-child(odd) {
    background-image:url(http://placehold.it/200x200);
    height:200px;
}

JavaScript

var addButtons = document.querySelectorAll('button');
var first = document.getElementById("first"),
    second = document.getElementById("second");

for (var i = 0; i < addButtons.length; i++)
    addButtons[i].onclick = function () {
        (second.children.length > first.children.length ? first : second).appendChild(document.createElement('li'));
    };