JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div class="title spread">Lighting</div>
    <div class="subtitle spread">我是中文</div>
</div>
<div class="box">
    <div class="title spread">Word Test</div>
    <div class="subtitle spread">我是中文 測試</div>
</div>

CSS

.box {
    width: 250px;
    height: 250px;
    border: 1px solid red;
    margin: 6px;
}

.title {
    margin-top: 40px;
    height: 16px;
}

.spread {    
   text-align: center;
}

JavaScript

/**
 * Text justify function
 * make text justify correspond to the container
 *
 * @author Chan
 */
    $.fn.textjustify = function() {
        return this.each(function() {
            var text = $(this).text(),
                containerWidth = $(this).width(),
                character = '',
                string = '',
                singleWidth = 0,
                firstItemWidth = 0,
                lastItemWidth = 0,
                alignWidth = 0;
                
            if ('' !== text) {
                $(this).css('position', 'relative');
                textArray = text.split('');
                

                for (i in textArray) {
                    // Wrapp with div to get character width
                    character = ('' === $.trim(textArray[i])) ? '&nbsp' : textArray[i];
                    string += '<span>' + character + '</span>';
                }

                $(this).html(string);
                
                firstItemWidth = $(this).find('span:first').width();
                lastItemWidth = $(this).find('span:last').width();
                singleWidth = Math.floor((containerWidth -firstItemWidth - lastItemWidth)/ (textArray.length-2));
                
                alignWidth = containerWidth - (firstItemWidth + lastItemWidth);
                
                $(this).find('span').each(function(i) {
                    
                    if (0 === parseInt(i)) {
                        // The first item
                        $(this).css({position: 'absolute', left: 0, top: 0});
                    } else if ((parseInt(textArray.length) - 1) === parseInt(i)) {
                        // The last item
                        $(this).css({position: 'absolute', right: 0, top: 0});
                    } else {
                        // Other items
                        //var left = (i * singleWidth) - $(this).width() + firstItemWidth;
                        
                        var left =...