JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
  <ul class="nav"> 
    <li><a href="/local-issues" title="Local Issues">Local Issues</a> 
    <ul class="children"> 
      <li><a href="/issue-one" title="Meet Daniel">Issue One</a></li> 
      <li><a href="/issue-two" title="Issues">Issue Two</a></li> 
      <li><a href="/issue-three" title="Issue Three">Issue Three</a></li> 
    </ul> 
    </li> 
    <li><a href="/have-your-say" title="Have Your Say">Have Your Say</a></li> 
    <li><a href="/public-newsroom/" title="Public Newsroom">Public Newsroom</a> 
    <ul class="children"> 
      <li><a href="/public-newsroom/local-events/" title="Local Events">Local Events</a></li> 
      <li><a href="/public-newsroom/tv/" title="TV">TV</a></li> 
      <li><a href="/public-newsroom/media-releases/" title="Media Releases">Media Releases</a></li> 
      <li><a href="/public-newsroom/quick-facts/" title="Quick Facts">Quick Facts</a></li> 
    </ul> 
    </li> 
    <li><a href="/join-the-team/" title="Join The Team">Join The Team</a> 
    <ul class="children"> 
      <li ><a href="/join-the-team/donate/" title="Donate">Donate</a></li> 
      <li ><a href="/join-the-team/volunteer/" title="Volunteer">Volunteer</a></li> 
      <li ><a href="/join-the-team/contact/" title="Contact">Contact</a></li> 
    </ul> 
    </li> 
  </ul> 
</div>

CSS

.firstWord {
    font-size: 15px;    
}
.nav li {
    margin-left: 10px;
    float: left; 
    font-size: 40px;
}
.children li {
    font-size: 10px;
}
.menu {
    width: 100%;
    height: 120px;
    background-color: #FF8C00;    
}

JavaScript

$('#header > ul.nav > li > a').each(function() {
    var obj = $(this);
    var text = obj.html();
    var parts = text.split(' ');
    var replace = '<span class="firstWord">'+parts[0]+'</span><br />';
    parts.shift();
    replace += parts.join(' ');
    obj.html(replace);
});