How to make input boxes the same width using tailwind css

Question 1

I have 3 input boxes. 2 of them are first name and last name (which are on the same line) and email which is on a line above. I’m trying to make the width of the email box be as wide as the combined width of the first name and last name boxes including the gap between them. Below is my code:

return (
    <div className="flex flex-col items-center justify-center py-10">
       <h1 className="text-xl font-bold mb-5">
        Create your personal account
       </h1>
       <hr/>
       <label htmlFor="email"></label>
       <input className="border border-black p-3 outline-none mb-4"
          id="email"
          type="text"
          value={user.email}
          onChange={(e) => setUser({...user, email: e.target.value})}
          placeholder="E-mail address"
        />
        <div className="flex gap-2">
          <label htmlFor="firstName"></label>
          <input className="border border-black p-3 outline-none mb-4"
              id="firstName"
              type="text"
              value={user.firstName}
              onChange={(e) => setUser({...user, firstName: e.target.value})}
              placeholder="First Name"
            />
          <label htmlFor="lastName"></label>
          <input className="border border-black p-3 outline-none mb-4"
              id="lastName"
              type="text"
              value={user.lastName}
              onChange={(e) => setUser({...user, lastName: e.target.value})}
              placeholder="Last Name"
            />
        </div>
       
    </div>
  );```


I've tried setting a set width size but can't seem to get it right

Question 2

Wrap your inputs in a <div> with className flex flex-col like so:

   <div className="flex flex-col">
       <label htmlFor="email"></label>
       <input className="border border-black p-3 outline-none mb-4"
          id="email"
          type="text"
          value={user.email}
          onChange={(e) => setUser({...user, email: e.target.value})}
          placeholder="E-mail address"
        />
        <div className="flex gap-2">
          <label htmlFor="firstName"></label>
          <input className="border border-black p-3 outline-none mb-4"
              id="firstName"
              type="text"
              value={user.firstName}
              onChange={(e) => setUser({...user, firstName: e.target.value})}
              placeholder="First Name"
            />
          <label htmlFor="lastName"></label>
          <input className="border border-black p-3 outline-none mb-4"
              id="lastName"
              type="text"
              value={user.lastName}
              onChange={(e) => setUser({...user, lastName: e.target.value})}
              placeholder="Last Name"
            />
        </div>
    </div>

This is a sample Tailwind Playground with a working example. In the example, I adjusted the labels to wrap the adjacent input so that there wasn’t an issue with the gap-2 around the name inputs.

Leave a Comment Cancel reply