JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<a class="alphabetLinks">A</a>
|
<a class="alphabetLinks">B</a>
|
<a class="alphabetLinks">C</a>
|
<a class="alphabetLinks">D</a>
|
<a class="alphabetLinks">E</a>
|
<a class="alphabetLinks">F</a>
</div>

CSS

.container {
    display: table;  
    width: 100%;
}
.container .alphabetLinks {
    display: table-cell;
    text-align: center;
}