0

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  --|
4
  • check this link "tailwindui.com/components/application-ui/forms/form-layouts" Apr 26, 2021 at 3:45
  • @RaviAshara, There I couldn't find any section that has label at left and input at right with two inputs in the same row.. Refer my question, it has label at left and input to its right (Important note is that first name and last name will come in same line).. I am in the need of like that..
    – Undefined
    Apr 26, 2021 at 3:52
  • try looking at bootstrap grid. Use rows and columns to structure your form Apr 26, 2021 at 4:08
  • @ShubhamPeriwal, I cannot change the library and all.. Need to achieve only through tailwind..
    – Undefined
    Apr 26, 2021 at 4:27

2 Answers 2

3

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)

10
  • Please kindly refer my question layout, the input/select box alignment in previous row needs to be same like the next row.. If select label and select box has certain width then same needs to be there in the next row input/select.. In some times it might have the second input in the same row like last name (which works in your solution fine I think)..
    – Undefined
    Apr 26, 2021 at 4:49
  • Thanks for your solution once again as it resolves 90% of my query.. But one issue here is that if label is length for any input, then the inputs are not aligned properly.. For eg.., if I add date of birth in the third row, then it is not aligned properly.. I could understand that I need to adjust margin for all label but is there any other efficient work around?
    – Undefined
    Apr 26, 2021 at 4:59
  • I have adjusted the code to align the cells correctly. Although, you need to adjust the number of grid columns to reduce the space between labels and inputs. Kindly refer to tailwind grids for guidance.
    – Ajith Gopi
    Apr 26, 2021 at 5:01
  • Increase the number of columns to like 6. And then, use 1 column for label and 2 for input using col-span-2. So that input is wider than label
    – Ajith Gopi
    Apr 26, 2021 at 5:03
  • Okay thanks for your effort.. will refer to tailwind docs for further alignment..
    – Undefined
    Apr 26, 2021 at 5:04
0

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>

3
  • In your solution, the first name (both label and input) start and end under select user label.. But that is not expectation.. Label needs to be straight bottom and input needs to start where select box starts..
    – Undefined
    Apr 26, 2021 at 4:30
  • After first name has been completed with alignment to select box, then last name should display in the same line/row after first name..
    – Undefined
    Apr 26, 2021 at 4:31
  • You can also see the layout structure given in above question for reference like how label and input starts and ends..
    – Undefined
    Apr 26, 2021 at 4:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.