JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="sect">
    <li class="">Section 1</li>
    <li class="">Section 2</li>
    <li class="">Section 3</li>
    <li class="">Section 4</li>
    <li class="" >Section 5</li>
</ul>

CSS

#sect {
    width: 100%;
    /*
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;    
    flex-flow: row wrap;    
    */
    width: 100%;
    margin: 0;
    padding: 0;
}

#sect li {
    margin-right: 1px;
    /*-webkit-flex: auto;
    flex: auto;
    */
    float:left;    
    display: inline-block;
    width: 193px;
    background-color: #e4e4e4;
    margin-right: 0px;
    margin-bottom: 1px;
    height: 35px;
    line-height: 35px;
    color: #5f5f5f;
    text-align: center;
    font-style: 15px;
}

JavaScript

$.fn.resizeRows = function(minCellWidth) {
    return this.each(function () {
        //total width of a row in pixels
        var totalwidth = $(this).width();
        //max count of cells that would fit per one row
        var maxcount = Math.floor(totalwidth/minCellWidth);
        //number of cells in the end that would require percentage width
        var endrows = $(this).find('li').length % maxcount;    
        //cache this ul
        thisul = $(this)
        
        $(this).find('li').each(function(index){
          if (index<maxcount||( thisul.find('li').length-index)>=maxcount) 
              $(this).width((totalwidth/maxcount)+'px');
          else      
              $(this).width(100/endrows + "%")
    })
})
}

$("#sect").resizeRows(193);
$(window).resize(function(){
    $("#sect").resizeRows(193);
});