JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<ul>
<li>1.4 Authentique</li>
<li>1.4 RTA</li>
<li>1.5 DCi Authentique</li>
<li>1.5 DCi Dynamique</li>
<li>1.5 DCi Exception</li>
<li>1.5 DCi Expression</li>
<li>1.5 DCi Extreme</li>
<li>1.5 DCi Privilege</li>
<li>1.5 DCi Sportway</li>
<li>1.6 Alize</li>
<li>1.6 Authentique</li>
<li>1.6 CC Dynamique</li>
<li>1.6 Coupe</li>
<li>1.6 Dynamique</li>
<li>1.6 Exception</li>
<li>1.6 Expression</li>
<li>1.6 Extreme</li>
<li>1.6 Privilege</li>
<li>1.6 RTA</li>
<li>1.6 RTE</li>
<li>1.6 RXi</li>
<li>1.6 RXT</li>
<li>1.6 Sportway</li>
<li>1.9 DTi RTE</li>
<li>2.0 RXE </li>
<li>2.0 RXT Sport Tourer</li>
<li>1.5 dCi Privilège</li>
</ul>
<br style="clear: both;" />
<p id="info"></p>
</div>
CSS
@import url("http://2.elaraba.com/css/main.css");
li {float: left; padding: 12px;}
div {width: 696px; border: 1px solid #ccc;}
ul{margin: 0; padding: 0; text-align: center;}
.right {margin-right: 0px; background: red;}
JavaScript
$(document).ready(function() {
var divWidth = $("ul").innerWidth();
var totalWidth = 0;
$('li').each(function() {
var liWidthOut = $(this).width();//outerWidth(true);
/*var liWidthIn = $(this).innerWidth();*/
totalWidth += liWidthOut;
if (totalWidth >= divWidth) {
$(this).addClass("left");
$(this).prev().removeClass("middle").addClass("right");
totalWidth = liWidthOut;
}
else {
$(this).addClass("middle");
}
/*$("p").append("Total:" + totalWidth + "Li:" + liWidthOut + "<br/>");*/
});
$("li:last").removeClass("middle").addClass("right").css("clear", "right");
$("li:first").removeClass("middle").addClass("left");
$("li").addClass("button");
});