JSFiddle - React, Tailwind, and code Playground

HTML

<div class='parent'></div>

CSS

.parent {
    width: 100%;
    height: 50%;
    background: pink;
    border: 1px solid red;
    min-width: 400px;
    min-height: 200px;
}

.child {
    min-height: 200px;
    min-width: 10px;
    border: 1px solid black;   
    display: inline-block;
}

.child:nth-child(even) {
    background: blue; 
    width: calc(100%/n -10);
}

.child:nth-child(odd) {
    background: green;  
    width: calc(100%/n -10);
}

JavaScript

var x = Math.round(Math.random() * 10);



for (var i = 0; i < x; i++) {
    $('.parent').append('<div class="child"></div>');
}