JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<ul>
    <li><a href="#">first test</a>

    </li>
    <li><a href="#">test a</a>

    </li>
    <li><a href="#">test testtest</a>

    </li>
    <li><a href="#">testtest</a>

    </li>
    <li><a href="#">test</a>

    </li>
    <li><a href="#">test test test</a>

    </li>
    <li><a href="#">test test</a>

    </li>
    <li><a href="#">last test</a>

    </li>
</ul>

CSS

ul {
    /* general */
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.flexbox ul {
    display: flex;
    flex-flow: row wrap;
}
li {
    white-space: nowrap;
    border: 1px solid #555555;
    float: left;
}
.flexbox li {
    flex: auto;
}
li:first-child {
    text-align: right;
    order: 1;
    /* fallback */
    float: right !important;
}
/* make it look nice */
 li a {
    line-height: 50px;
    display: block;
    height: 50px;
    color: rgb(59, 59, 59);
    font-family:'Dosis', sans-serif;
    font-weight: 500;
    text-decoration: none;
    padding: 0px 20px 0px 10px;
    font-size: 16px;
    background-color: lightgrey;
}
li a:hover {
    background-color: grey;
}