JSFiddle - React, Tailwind, and code Playground
HTML
<div id="menuwrapper">
<div class="menuitem">CAREERS</div>
<div class="menuitem">TRADE</div>
<div class="menuitem">CONTACT US</div>
<div class="menuitem">PRIVACY POLICY</div>
<div class="menuitem">T&CS</div>
<div class="menuitem">SITEMAP</div>
<div class="menuitem">CORPORATE</div>
<div class="menuitem">ACCESSIBILITY</div>
<span class="stretcher"></span>
</div>
CSS
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px; /* just for demo */
}
#menuwrapper {
height: auto;
background: #000;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
min-width: 600px; /* just for demo */
}
.menuitem {
width: auto;
height: 40px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
background: #000;
color: yellow;
}
.stretcher {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
}