JSFiddle - React, Tailwind, and code Playground

by wwt

HTML

<div data-char="." data-char-align="true">1.123</div>
<div data-char="." data-char-align="true">123.1</div>
<div data-char="." data-char-align="true">123123.123123</div>

<div data-char="2" data-char-align="true">1.123</div>
<div data-char="2" data-char-align="true">123.1</div>

CSS

div[data-char-align=true] {

    background: #ccc;
}
div[data-char-align=true] i {
    color:red;
    font-style:normal;
}

JavaScript

$("div[data-char-align=true]").each(function(i,el){
    var char = $(el).attr("data-char");
    $(el).html($(el).html().replace(char, "<i>"+char+"</i>"));
    var w = $(el).width();
    var p = $(el).find("i").position().left;
    var ml = ((w/2) - p) + "px";
    $(el).html("<span style='padding-left:"+ml+"' data-pos='"+p+"'>"+$(el).html()+"</span>");
});

$(window).resize(function(){
    $("div[data-char-align=true]").each(function(i,el){
        var s = $(el).find("span");
        var w = $(el).width();
        s.css("padding-left",((w/2) - s.attr("data-pos")) + "px")
    })
});