JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="side-nav-menu">
    <li>
        <a>HOME</a>
    </li>
    <li>
        <a>BLOG</a>
    </li>
    <li>
        <a>ABOUT</a>
    </li>
    <li>
        <a>RESUME</a>
    </li>
    <li>
        <a>PORTFOLIO</a>
    </li>
    <li>
        <a>PROFILES</a>
    </li>
    <li>
        <a>CONTACT</a>
    </li>
</ul>

CSS

body {
    background-color: #999;
    font-family: sans-serif;
}
#side-nav-menu {
    width: 40%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    list-style: none;
    padding: 0;
    margin: 0;
}
#side-nav-menu li {
    height: 30px;
}

#side-nav-menu li a {
    display: block;
    color: white;
    text-align: justify;
}

#side-nav-menu li a span {
    display: inline-block;
}

JavaScript

$('#side-nav-menu li a').each(function() {
   var t = $(this),
       letters = $(this).text().split(''),
       width = $(this).width(),
       output = "";
    for (var i=0,l=letters.length;i<l;i++){
        output += "<span style='width:" + ((i===(l-1)) ? 0 : width/(l-1)) +"px;'>" + letters[i] + "</span>";
    }
    t.html(output);
});