JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer-menu-bar">  
     <div class="inner-menu" >Foo fooFoo fooFoo fooFoo fooFoo fooFoo fooFoo fooFoo fooFoo fooFoo </div>
    <div class="inner-menu" >Bar barBar bar Barbar </div>
</div>

CSS

#outer-menu-bar
{
    width:100%;
    height:32px;
    text-align:center;
    position:relative;
    background:#900;
}

.inner-menu
{
    height:100%;
    display:inline-block;
    background:#ccc;
    
}