JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Same baseline</h3>
<label id="test1">Some text</label>
<input id="test1-2" value="Some text">
<div id="result1"></div>
    
<h3>Different baseline</h3>
<label id="test2">Some text</label>
<input id="test2-2" value="Some text">
<div id="result2"></div>

CSS

body,
label,
span,
input {  
    display: inline-block;
    font-size: 12px;
    font-family: Arial;
}

#test2 {
    vertical-align: top;
}

JavaScript

function getBaseline(element) {
    element = jQuery(element);
    var span = document.createElement("span");
    span.setAttribute("style", "font-size:0");
    span.innerText = "A";

    var wrapper = document.createElement("span");
    applyCSSProperties.call(wrapper, element);
    element.wrap(wrapper);
    element.before(span);
    
    var computed = span.getBoundingClientRect().bottom;
    
    span.remove();
    element.unwrap(wrapper);
        
    return computed;
}

function applyCSSProperties(element) {
    var styles = {};
    var comp = getComputedStyle(element[0]);
    
    for(var i = 0; i < comp.length; i++){
        styles[comp[i]] = comp.getPropertyValue(comp[i]);
    }
    
    jQuery(this).css(styles);
}

jQuery('#result1').html('Computed label: <strong>' + getBaseline('#test1') + '</strong> <br>Computed input <strong>' +  getBaseline('#test1-2') + '</strong>')

jQuery('#result2').html('Computed label: <strong>' + getBaseline('#test2') + '</strong> <br>Computed input <strong>' +  getBaseline('#test2-2') + '</strong>')