JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fixedWidthHeight">
    <a class="isNotADiv">Text should be always be centered in parent vertically, but also wrap, and go to ellipsis on overflow</a>
</div>
<br><br><br>
<hr style="clear:both"><br><br><br>
    <br>
<div class="fixedWidthHeight">
    <a class="isNotADiv">short text should be vertically aligned </a>
</div>
<hr style="clear:both">
<div class="fixedWidthHeight">
    <div class="isNotADiv">short text should be vertically aligned </div>
</div>

CSS

.fixedWidthHeight{
    position:relative;
    display:table;
    border: 1px solid red;
    width: 280px;
    height: 48px;
}
.isNotADiv{
    border: 1px solid green;
    width: calc(100% - 6px);
    display:block;
    xmax-height: calc(100% - 6px);
    overflow:hidden;
    white-space:normal;
    word-break: word-break;
    text-overflow: ellipsis; /* why is this erroring as red text? */
    padding:3px;
    vertical-align: middle;
}