How to align form label and input?

Question

I am trying to make a simple layout in tailwindcss .

The layout needs to be like this,

Select User      | --- Select Box ---|

First Name       | First Name Input  |       Last Name    | Last Name  Input |

Working snippet:

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <div className="flex flex-wrap w-full"> <form class="w-full"> <div class="md:flex md:items-center mb-6"> <div class="md:w-1/6"> <label class="block text-gray-500 font-bold mb-1 md:mb-0" for="inline-full-name" > Select User </label> </div> <div class="md:w-1/3"> <select class="border-2 border-gray-600" name="users" id="users"> <option value="user1">One</option> <option value="user2">Two</option> <option value="user3">Three</option> </select> </div> </div> <div class="md:flex md:items-center mb-6"> <div class="flex w-full"> <div class="md:w-1/6"> <label class="block text-gray-500 font-bold mb-1 md:mb-0" for="inline-password" > First Name </label> </div> <div class="md:w-1/3"> <input class="appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-gray-800" id="first-name" type="text" placeholder="First Name" /> </div> </div> <div class="flex w-full"> <div class="md:w-1/6"> <label class="block text-gray-500 font-bold mb-1 md:mb-0" for="last-name" > Last Name </label> </div> <div class="md:w-1/3"> <input class="appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-gray-800" id="inline-password" type="text" placeholder="Last Name" /> </div> </div> </div> </form> </div>

Here I am not getting properly aligned layout for first name and last name.

The first name label and input should start from the the same line like select box.

Kindly help me to place the first name and last name in the same line and first name input properties needs to get aligned with previous select.

Original form design:

Select User      | --- Select Box ---|

First Name       | First Name Input  |       Last Name    | Last Name  Input |

Date of Birth    | - DOB input Box - |

City             | - City Input    - |       Zip          | -- Zip  Input  --|

Answer 1

You seem to be using an old approach to achieving this. In the below code, I have replaced the width method with CSS grids .

There will be 4 grid columns on small devices and 8 columns on medium devices and up. Within each grid item, flex is used along with items-center to align the label and input vertically.

Note: The labels use mr-2 class to add .5rem margin to the right, so input is separated

1	2	3	4	5	6	7	8
L	C1/3	C2/3	C3/3
L	C1/3	C2/3	C3/3	L	C1/3	C2/3	C3/3

The above is a visual representation of how the controls and labels take place. L is a label and C is a control.

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <div className="flex flex-wrap w-full"> <form class="w-full"> <div class="grid grid-cols-4 md:grid-cols-8 gap-3"> <:-- Grid Container --> <div class="flex items-center"> <:-- Grid cell --> <label class="text-gray-500 font-bold mb-1 md:mb-0 mr-2 whitespace-nowrap" for="inline-full-name">Select User</label> </div> <div class="flex items-center col-span-3"> <:-- Grid cell --> <select class="border-2 border-gray-600 w-full" name="users" id="users"> <option value="user1">One</option> <option value="user2">Two</option> <option value="user3">Three</option> </select> </div> <div></div><div></div><div></div><div></div> <div class="flex items-center"> <:-- Grid cell --> <label class="text-gray-500 font-bold mb-1 md:mb-0 whitespace-nowrap mr-2" for="inline-password">First Name</label> </div> <div class="flex items-center col-span-3"> <:-- Grid cell --> <input class="appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-gray-800" id="first-name" type="text" placeholder="First Name" /> </div> <div class="flex items-center"> <!-- Grid cell --> <label class="block text-gray-500 font-bold mb-1 md:mb-0 whitespace-nowrap mr-2" for="last-name">Last Name</label> </div> <div class="flex items-center col-span-3"> <!-- Grid cell --> <input class="appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-gray-800" id="inline-password" type="text" placeholder="Last Name" /> </div> </div> </form> </div>

(View in full page to see result)

Answer 2

add class="flex" to the main boxes with label and input are:

(note that in a small frame as in the snippet it will still wrap the boxes as there is not enough width to display them on the same line)

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <div className="flex flex-wrap w-full"> <form class="w-full"> <div class="md:flex md:items-center mb-6"> <div class="md:w-1/6"> <label class="block text-gray-500 font-bold mb-1 md:mb-0" for="inline-full-name" > Select User </label> </div> <div class="md:w-1/3"> <select class="border-2 border-gray-600" name="users" id="users"> <option value="user1">One</option> <option value="user2">Two</option> <option value="user3">Three</option> </select> </div> </div> <div class="md:flex md:items-center mb-6"> <div className="flex w-full" class="flex"> <div class="md:w-1/6"> <label class="block text-gray-500 font-bold mb-1 md:mb-0" for="inline-password" > First Name </label> </div> <div class="md:w-1/3"> <input class="appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-gray-800" id="first-name" type="text" placeholder="First Name" /> </div> </div> <div className="flex w-full" class="flex"> <div class="md:w-1/6"> <label class="block text-gray-500 font-bold mb-1 md:mb-0" for="last-name" > Last Name </label> </div> <div class="md:w-1/3"> <input class="appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-gray-800" id="inline-password" type="text" placeholder="Last Name" /> </div> </div> </div> </form> </div>