How to align form label and input?

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 className="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 className="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  --|  

https://stackoverflow.com/questions/67260479/how-to-align-form-label-and-input April 26, 2021 at 11:26AM