JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
          <ul>
             <li> //width = 50px</li>
             <li>//width = 50px</li>
             <li class="last">//width (...) 300px</li>
          </ul>
        </nav>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
nav {
    display: table;
    table-layout: fixed;
    width:400px;
    height:50px;
}
nav > ul {
    display: table-row;
}
nav li {
    display: table-cell;
    width: 50px;
    padding:5px;
    outline: 1px dashed blue;
}
nav li.last {
    width: auto;
}

JavaScript

/* SO
http://stackoverflow.com/questions/14737863/make-the-last-inline-list-item-extend-remaining-width-of-container

Compatibility IE8+ due to box-sizing and display: table-*
*/