JSFiddle - React, Tailwind, and code Playground

HTML

<div id="links">
    <a href="/">LINK 1</a>
    <a href="/">LINK 2</a>
    <a href="/">LINK 3</a>
    <a href="/">LINK 4</a>
</div>

CSS

#links { 
    position:fixed;
    height:100%;
    width:150px;
    left:65px;
    background:lightslategrey; }

#links a {
    text-decoration:none;
    position:relative;
    display:inline-block;
	padding:5px;
	height:25px;
	width:100%;
	margin-bottom:10px;
    color:white;
	text-align:center;
    font:25px consolas; }

JavaScript

//Register Event so it run on page load..
$(document).ready(function(){
    //Register another event which call the script on window resize..
    $(window).resize(function()
    {
        //Call this function on resize
        adjustSpacing();
    });
    //Call this function on first load
    adjustSpacing();
});

function adjustSpacing()
{
    //Calculate window height
    var h = $(window).height();
    //Calculate height of 1st link
    var linkH = $("#links a").first().height();
    //Get total number of links
    var totalLinks = $("#links a").length;
    //Calculate top padding and bottom padding for each link
    var space = (h - (totalLinks * linkH)) / (totalLinks*2 + 1);
    $("#links a").each(function(){
        //Apply padding on each link
        $(this).css("padding-top", space);
        $(this).css("padding-bottom", space);
    });    
}