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: 150px;
    height: 150px;
    border: 1px solid red;
    margin: 6px;
}
.title {
    margin-top: 40px;
    height: 16px;
}
.singleChar {
    float: left;   
    text-align: center;
    display: block;
    min-height: 1px;
}

JavaScript

$(".spread").each(function(idx, elem) {
    var titleElem = $(this),
        titleStr = titleElem.html(),
        charWidth = Math.floor(($(".box").width() / titleStr.length) * 100) / 100;

    titleElem.html("");

    for(var i = 0; i < titleStr.length; i++) {
        titleElem.append($("<span>", {"class" : "singleChar"}).css("width", charWidth).html(titleStr[i]));
    }
});