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