JSFiddle - React, Tailwind, and code Playground

HTML

<div class='wrap'>
<a href='index.php' class='a1'>LOREM IPSUM</a>
<a href='index.php' class='a2'>DOLOR SIT</a>
<a href='index.php' class='a3'>BLUE SKY</a>
<a href='index.php' class='a4'>DEEP OCEAN</a>
</div>

CSS

a{
  display: inline-block;
  width: auto;
  justify-content: space-between;
  text-decoration:none;
  clear: both;
}
a.flex{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.a1{font-size:0.7rem;}
.a2{font-size:1rem;}
.a3{font-size:1rem;}
.a4{font-size:0.7rem;}
a span{
  display:inline-block;
}

JavaScript

var elements = document.querySelectorAll(".wrap > a");
var maxWidth = 0;
for (var i = elements.length - 1; i >= 0; i--) {
	maxWidth = Math.max(maxWidth, elements[i].offsetWidth);
}
for (var i = elements.length - 1; i >= 0; i--) {
	elements[i].classList.add("flex");
  elements[i].style.width = maxWidth+ "px";
	var text = elements[i].textContent;
  text.split("");
  elements[i].innerHTML = "";
  for (var j = 0; j < text.length; j++) {
  	var span = document.createElement("span");
    span.innerHTML = (text[j] === " ")? "&nbsp;" : text[j];
    elements[i].appendChild(span);
  }
}