JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>fixed</li>
    <li>fixed</li>
    <li>fixed</li>
    <li class="float">FLOAT</li>
    <li>fixed</li>
    <li>fixed</li>
</ul>

CSS

*{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

ul{
    list-style: none;
    width: 100%;
    overflow: hidden;
    background-color: red;
    padding: 5px  0 0 5px;
background: -webkit-gradient(linear, left top, right top, color-stop(33%,#ff0000), color-stop(33%,#ffffff), color-stop(54%,#ffffff), color-stop(54%,#ff0000)); /* Chrome,Safari4+ */
}
.float{
       position: absolute;
    left: 170px;
    right: 110px; / Не работает
}
.float+li,
.float+li+li{
    float: right;
}
li{
    float: left;
    width: 50px;
    background-color: green;
    margin-right: 5px;
}