JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Box">
        <span class="BoxBefore"></span>
        <div class="Centered">
            <div class="Spread" >Lighting</div>
            <div class="Spread">我是中文</div>
        </div>
    </div>

CSS

*
    {
        margin: 0;
        padding: 0;
    }
    .Box
    {
        width: 150px;
        height: 150px;
        border: 1px solid red;
        margin: 6px;
    }
    .BoxBefore
    {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-left: -5px;
    }
    .Centered
    {
        display: inline-block;
        *display: inline;
        zoom: 1;
        vertical-align: middle;
        width: 100%;
    }
    .Spread
    {
        width: 100%;
        text-align: justify;
        font-size: 0;
    }
        .Spread span
        {
            font-size: medium;
        }
    .SpreadAfter
    {
        display: inline-block;
        height: 0px;
        width: 100%;
    }

JavaScript

$.fn.SplitText = function () {
        return this.each(function () {
                return $(this).html('<span>' + $(this).text().split('').join(' ') + '</span><span class="SpreadAfter"></span>');
        });
    }
    
    $(function () {
        $('.Spread').SplitText();
    })