JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fullHeight">
<span id="textSpan">abc</span>
<span id="posSpan" class="fullHeight"></span>
    <button onclick="changeAlign();">Change</button>
</div>

CSS

html,body
{
    height:100%;
}
.fullHeight
{
    height:100%;
}
#posSpan
{
    width:50px;
    background-color:red;
    display:inline-block;
}

JavaScript

window.onload=function(){
    console.log(document.getElementById("textSpan").getBoundingClientRect());
    console.log(document.getElementById("posSpan").getBoundingClientRect());
}
    
function changeAlign(){
    document.getElementById("posSpan").style.verticalAlign="bottom";
}