JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="flex-container">
    <li>Line 0</li>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3</li>
    <li>Line 4</li>
    <li>Line 5</li>
    <li>Line 6</li>
    <li>Line 7</li>
    <li>Line 8 is a little bit longer</li>
    <li>Line 0</li>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3</li>
    <li>Line 4</li>
    <li>Line 5</li>
    <li>Line 6</li>
    <li>Line 7</li>
    <li>Line 8 is a little bit longer</li>
</ul>

CSS

ul.flex-container {
    background: #090;
    display: flex;
    flex-flow: column wrap;
    list-style: none;
    max-height: 192px;
    padding: 5px;
    position: absolute;
}
ul.flex-container li {
    background: rgba(255, 0, 0, .75);
    color: #fff;
    flex: 1 0 30px;
    font-family: arial;
    line-height: 30px;
    margin: 1px;
    padding: 0 2px;
    min-width: 100px;
}

JavaScript

var count = $("ul.flex-container li:nth-child(6n)").length;

var firstWidth = Math.max.apply(null, $("ul.flex-container").map(function () {
    return $(this).outerWidth(true);
}).get());

var childWidth = Math.max.apply(null, $("ul.flex-container li:nth-child(6n+6)").map(function () {
    return $(this).outerWidth(true);
}).get());

var totalWidth = childWidth * count

$("ul.flex-container").css({
    width: firstWidth + totalWidth,
});