Vertically align text before and after an input with a label using tailwindcss-CodePudding

I'm trying to get the following result but with the text in front of the input vertically aligned with the text after the input.

Here's what I've got to produce that so far.

<div >
    <span>every</span>
    <div>
        <label >Interval</label>
        <div >
            <input type="number"  />
            <span>hour(s)</span>
        </div>
    </div>
</div>

CodePudding user response：

This should do the trick, the reason it wasn't centered on the input was because the height of the side with the input field was the input field and also the label. If you make the lebel position absolute it loses its height in the DOM, then just adding some margin to the top to make it look like the label takes up space and positioning it above a little bit!

<div >
    <span>every</span>
    <div>
        <label >Interval</label>
        <div >
            <input type="number"  />
            <span>hour(s)</span>
        </div>
    </div>
</div>