Simple div bars and their orientation in a box

Bars in a box, aligned to the bottom of the box. A random number of bars (within bounds) with a random height (within bounds). Conclusion: inline-block to the rescue!

by rudiedirkx

HTML

<div id="bars"></div>
<p><button onclick="repop()">Do that again</button></p>

CSS

#bars {
    border: solid 1px black;
    display: inline-block;
    padding: 5px;
    height: 100px;

    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: inline-flex;

    -webkit-flex-flow: row nowrap;
    -moz-flex-flow: row nowrap;
    flex-flow: row nowrap;

    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    align-items: flex-end;
}
#bars > div {
    width: 5px;
    background-color: #999;
}
#bars > div + div {
    margin-left: 2px;
}

JavaScript

var bars = document.getElementById('bars');

function repop() {
    var L = 10 + parseInt(Math.random() * 30);

    bars.innerHTML = '';
    for ( var b, h, i=0; i<L; i++ ) {
        h = 20 + parseInt(Math.random() * 80);
        b = document.createElement('div');
        b.style.height = h + 'px';
        bars.appendChild(b);
    }
}
repop();