JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu"><li>One Thing</li><li>Two Things</li><li>Three Pigs</li><li>Four Seasons</li><li>Five Defs</li><li>Six Laimas</li><li>Drag Splitter</li><li>To Resize</li></ul>

CSS

ul.menu{
    padding:0;
    margin:0;
}
ul.menu li{
    list-style:inside none;
    line-height:30px;
    text-align:center;
    background-color:#a00;
    color:#fff;
    display:inline-block;
    padding:0 15px;
    border-right:1px solid #c66;
}

ul.menu li.menu-b{
    display:block;
    text-align:left;
    max-width:100px;
}

JavaScript

var menu=document.querySelector('.menu'),
    list=menu.children,
    top=list[0].offsetTop,
    wrap=function(){
        for(var i=0,el;el=list[i];i++) {
            el.classList.remove('menu-b');
            if(el.offsetTop>top)
                el.classList.add('menu-b');
        }
    };

wrap();

window.addEventListener('resize',wrap);