CODEWITHSUNDEEP
csstailwind-css
Rick
Rick

Reputation: 711

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

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.

enter image description here

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

<div class="space-x-2 flex items-center">
    <span>every</span>
    <div>
        <label class="mb-1 block text-sm font-semibold text-slate-700">Interval</label>
        <div class="space-x-2 flex items-center">
            <input type="number" class="w-24 block rounded-md text-sm border-slate-300 shadow-sm" />
            <span>hour(s)</span>
        </div>
    </div>
</div>

Upvotes: 0

Views: 1900

Answers (1)

JDawwgy
JDawwgy

Reputation: 928

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 label 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 class="space-x-2 flex items-center relative mt-6">
    <span>every</span>
    <div>
        <label class="mb-1 block text-sm font-semibold text-slate-700 absolute -top-6">Interval</label>
        <div class="space-x-2 flex items-center">
            <input type="number" class="w-24 block rounded-md text-sm border-slate-300 shadow-sm" />
            <span>hour(s)</span>
        </div>
    </div>
</div>

Upvotes: 3

Related Questions