JSFiddle - React, Tailwind, and code Playground

HTML

<table id="holder">
    <tr class="va-middle">
        <td>к</td>
    </tr>
</table>

<table id="holder2">
    <tr class="va-middle">
        <td>Й</td>
    </tr>
</table>

CSS

#holder, #holder2 {
    width: 500px;
    height: 50px;
    background-color: #cecece;
    font-size: 14pt;
    text-transform: uppercase;
    margin: 20px;
}
.va-middle {
    vertical-align: top;
}

JavaScript

Обратите внимание - таблицы идентичны. Только буква К расценивается равной по высоте букве Й, что при выравнивании по центру создаёт неравенство отступов. Нужно, чтобы верх буквы К был вровень с границей фона.