JSFiddle - React, Tailwind, and code Playground
HTML
<div class="menu">
<a href="localIssues" class="menuHeader">Local Issues<img src="http://www.ibm.com/developerworks/rational/library/04/r-3228/3228_icon_down_arrow.jpg" /></a>
<a href="haveYourSay" class="menuHeader">Have Your Say<img src="http://www.ibm.com/developerworks/rational/library/04/r-3228/3228_icon_down_arrow.jpg" /></a>
</div>
CSS
.firstWord {
font-size: 15px;
}
.menuHeader {
margin-left: 10px;
float: left;
font-size: 40px;
}
.menu {
width: 100%;
height: 120px;
background-color: #FF8C00;
}
JavaScript
$('.menuHeader').each(function() {
var obj = $(this);
var text = obj.html();
var parts = text.split(' ');
var replace = '<span class="firstWord">'+parts[0]+'</span><br />';
parts.shift();
$.each(parts, function(key, value) {
replace += ' '+value;
});
obj.html(replace);
});