JSFiddle - React, Tailwind, and code Playground

by ovfiddle

HTML

<ol>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li class="force-justify"></li>
</ol>

CSS

ol {
    border:1px dotted red;
    /*force the desired behaviour*/
    text-align:justify;
    /*remove the minimum gap between columns caused by whitespace*/
    font-size:0;
    /*avoid the pretty nasty collapse*/
    min-width:510px;/*100px width + 2px borders x 5*/
}

li {
    /*make text-align property applicable*/
    display: inline;
}

/*force text-align:justify; behaviour that requires text to be at least over 2 lines*/
/*IMO using :after is a neater approach, but you have an alternative of using an extra element*/
ol:after/*, .force-justify*/ {
    content:"";
    display: inline-block;
    position: relative;
    width: 100%;
    height: 0;
}

div {
    display: inline-block;
    width: 100px;
    height: 250px;
}






/* for the demo */
body {
    padding: 20px 0;
}
div {
    background: #eee;
    border: 1px solid #ababab;
    border-radius: 8px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}