JSFiddle - React, Tailwind, and code Playground

by Justin

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
    <ul>
        <div class="clearfix"></div>
        <li>Lorem</li>
        <li>ipsum</li>
        <li>dolor</li>
        <li>sit</li>
        <li>amet,</li>
        <li>consectetur</li>
        <li>adipisicing</li>
        <li>elit.</li>
        <li>Est,</li>
        <li>iusto</li>
        <li>modi</li>
        <li>accusantium</li>
        <li>culpa</li>
        <li>nesciunt</li>
        <li>eum</li>
        <li>tempora</li>
        <li>quasi</li>
        <li>architecto</li>
        <li>cum</li>
        <li>molestias</li>
        <li>soluta</li>
        <li>rerum</li>
        <li>aut</li>
        <li>ullam</li>
        <li>earum</li>
        <li>eligendi</li>
        <li>quam</li>
        <li>ab?</li>
        <li>Eius,</li>
        <li>libero.</li>
    </ul>  
</div>

CSS

ul  { list-style: none; display: block;}
li { display:inline-block }

JavaScript

$(function() {
    testval = 0;
    buffer = 10;
    $('li').each(function() {
        thisWidth = parseFloat($(this).css('width')) + buffer;
        if( (testval + thisWidth) > 300) {
            $(this).after('<div class="clearfix"></div>');
            $preverious = $(this).prevUntil('.clearfix, ul');
            rowWidth = $(this).width();
            $(this).prevUntil('.clearfix, ul').each(function() {
                rowWidth += +$(this).width();
            })
            $preverious.push($(this)[0]);
            console.log(rowWidth);
            testval = 0;
        } else {
            testval += thisWidth;
        }
    })
})