Align text vertically above and below an input field labeled using tailwindcss

I am striving to achieve the desired outcome but with the text in front of the input vertically aligned with the text after the input.

https://i.sstatic.net/0WTfk.png

Here is what I have created so far to accomplish that:

<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>
csstailwind-css

Answer №1

Here is a nifty solution to centering the input field within your design. The key is to manipulate the positioning of the label element so that it appears as if it takes up space, even though it actually doesn't affect the height of the input field. By adjusting the margin and position of the label, you can achieve the desired layout with ease!

<div class="centered-input 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="centered-items 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to automatically trigger the opening of a Bootstrap accordion without manual

On my website, I have an "About Us" page featuring 3 bootstrap accordions - "Stories", and "Testimonials". My goal is to make it so that when a user clicks on the "FAQ" link in the navigation menu, they are directed to the "About Us" page with the "Testim ...

jqueryhtmlcsstwitter-bootstrap

Having trouble with the Three.js OBJ loader in CodePen?

Currently, I am experiencing a challenge with loading an OBJ file on Three.js. Oddly enough, the functionality seems to be working perfectly fine when I deploy the files on my server as demonstrated here: However, when attempting to run it on Codepen, I e ...

javascripthtmlcssthree.js

Having trouble removing lines from Router Link? Unfortunately, using style={{'textDecoration': 'none'}} doesn't seem to be doing the trick

Does anyone know why the text decoration is not working on my link when I use text-decoration none? Any solutions or suggestions would be greatly appreciated. Thank you in advance! Navbar.js file import React,{useState} from "react"; import { mak ...

cssreactjs

Cannot retrace steps in file tree using ../

My website has a file structure set up like this: css style.css other files... templates index.html other files... I am attempting to reference the style.css file from my index.html document. My initial attempt was to navigate back a directory u ...

pythonhtmlcsspostgresqlflask

The div remains unchanged when the button is clicked

My webpage is filled with several large div elements. There's a button on the page that, when clicked, should switch to the next div. Despite my efforts, the code I've written doesn't seem to be working as expected. :( This is the HTML st ...

javascriptjquerycsshtml

Utilize CSS to ensure that images are equal in height to their container element

This is the markup div.shadow | div#content |img.shadow | Is there a way to ensure that the shadow images always maintain the same height as the content area? The challenge lies in the fact that the content area can adjust its size based on different fac ...

javascripthtmlcss

Why is my jQuery animation running so sluggishly everywhere? Is there a way to improve its performance and make

I attempted to replicate the slider effect seen on this website: Below is the animation code: $('.tagLink').click(function () { $('html').css('overflow', 'hidden'); $('#tagBoxOverlay&ap ...

javascriptjqueryanimationcss

Tips for creating a full-length sidebar below the top navigation using Bootstrap 4

Recently started using Bootstrap and decided to work with the alpha version of Bootstrap 4 to create a website for my home network. My main concern is with the sidebar, as I want it to cover the entire left side of the page, starting just below the top na ...

htmlcssbootstrap-4

Tips on designing checkboxes with CSS

Can someone help me figure out how to style a checkbox using the code below? <input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" /> I've tried applying this style but it doesn't seem to work. The chec ...

htmlcsscheckbox

background image alteration when scrolling

I've been attempting to change the background image on scroll, but I haven't had any luck finding a guide. So, I'm hoping someone here can help me out. I found a video that showcases exactly what I'm trying to accomplish - https://www.y ...

javascripthtmlcssscroll

Having trouble making z-index work on a child div with absolute positioning

I am attempting to design a ribbon with a triangle div positioned below its parent div named Cart. <div class="rectangle"> <ul class="dropdown-menu font_Size_12" role="menu" aria-labelledby="menu1" style="min-width: 100px; z-index: 0"> & ...

jqueryhtmlcsstwitter-bootstrap-3css-shapes

What can I do to ensure my text appears closer to the top of the page?

To achieve the desired outcome of displaying "(även uppfinnare)" at the top row, you can use the following HTML: <div class="data-box"> <div class="personName"><strong> 3. Kee Marcello&nbsp; </strong>< ...

csslayouthtml

Utilizing the `repeat` function within `grid-template-areas` eliminates the need to manually repeat grid cell

When working with grid-template-areas in CSS grid, I encountered a situation where I wanted a header to span the entire width. Instead of defining the template-grid-columns with repeat(12, 1fr), I was searching for a way to utilize repeat() so that I would ...

htmlcsscss-grid

Having trouble with my bootstrap slider carousel - it's just not cooperating

I incorporated Bootstrap's carousel to display the various courses on my website, featuring three courses at a time before transitioning to the next set of three. However, I am encountering an issue with this setup. Please see the image below for refe ...

javascripthtmlcssbootstrap-5

Customize the color of the hamburger icon in Vue Bootstrap

I am struggling to change the color of the Vue Bootstrap Hamburger navbar-toggler-icon to white. Despite trying numerous code combinations, I have not been successful. Each time I load the app, the CSS defaults back to the original bootstrap URL. Do you ha ...

cssvue.jsbootstrap-4hamburger-menubootstrap-vue

Issue with the display of images

Is there a way to make a pop up image visible when hovering or clicking on an image on the webpage? Currently, the new pop up image is hidden behind the right div. Thank you in advance for any help. Paul ...

csshtml

Assign a class to a button created dynamically using Angular

While working on my project, I encountered an issue where the CSS style was not being applied to a button that I created and assigned a class to in the component.ts file. Specifically, the font color of the button was not changing as expected. Here is the ...

cssangulartypescriptcomponentssetattribute

Transforming a horizontal list into a vertical one

What might be causing the message list to display horizontally in the admin dashboard, but vertically on other pages? .user-list{ display:inline; } .users header, .users-list a{ display: flex; align-items: center; padding-bottom: 20px; border-bottom: 1px s ...

htmlcss

Having trouble displaying a background image on a React application

Public>images>img-2.jpg src>components>pages>Services.js> import React from 'react'; import '../../App.css'; export default function Services() { return <h1 className='services ...

javascriptcssreactjsimagebackground

The data-toggle function is not functioning properly with the code provided

Could someone shed some light on why my tabs and navigation bar dropdown button are not functioning properly? <div class="col-12"> <h2>Corporate Leadership</h2> <ul class = "nav nav-tabs&q ...

htmlcssbootstrap-4tabsreact-bootstrap