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: monospace;
}
#side-nav-menu {
    width: 200px;
    position: fixed;
    text-align: center;
    top: 50%;
    bottom: auto;
    left: auto;
    right: auto;
    transform: translate(0, -50%);
    list-style: none;
    padding: 0;
    margin: 0;
}

#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='font-size:" + width/l +"px;'>" + letters[i] + "</span>";
    }
    t.html(output);
});