JSFiddle - React, Tailwind, and code Playground

by Matt Ball

HTML

<ul>
<li class="but"><a href="#">ONE WORD<small>Other words here</small></a></li>
<li class="but"><a href="#">ONE WORD<small>Other words here</small></a></li>
<li class="but"><a href="#">ONE WORD<small>Other words here</small></a></li>
<li class="but"><a href="#">ONE WORD<small>Other words here</small></a></li>
</ul>

CSS

.but span {
    outline: 1px solid black;
}

JavaScript

$('ul > li.but > a').html(function (i, oldHtml)
{
    return oldHtml.replace(/(\s)(\w+)/, '$1<span>$2</span>');
});