JSFiddle - React, Tailwind, and code Playground

by Emre Erkan

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>

JavaScript

$('.but a').each(function() {
    var $a = $(this);
    var $small = $a.find('small');
    var smallText = $small.html();
    $small.remove();
    var arr = $a.html().split(' ');
    arr[1] = ['<span>', arr[1], '</span>'].join('');
    $a.html(arr.join(' ')).append(['<small>', smallText, '</small>'].join(''));
});