How can I align my labels, input, and textarea on same line?

user_14430938 0
Viewed 246

How can I align my labels, inputs, and textarea on the same line?

export default function Display() {
  ...
  return (
    <form onSubmit={handleChange}>
      <div className="mb-4 align-middle">
        <label>
          Title :
          <input
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="Title"
          />
        </label>
        <label>
          {" "}
          Comment :
          <textarea
            value={comment}
            placeholder="comment"
            onChange={(e) => setComment(e.target.value)}
            cols="50"
            rows="3"
          />
        </label>
      </div>
    </form>
  );
}

Here a picture (what I have vs expectations): enter image description here

tailwind-css reactjs
2 Answers

Set the parent div to display: flex and flex-direction: row

  ...
  return (
    <form onSubmit={handleChange}>
      <div className="mb-4 align-middle" style={{display: 'flex', flexDirection: 'row'}}>
        <label>
          Title :
          <input
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="Title"
          />
        </label>
        <label>
          {" "}
          Comment :
          <textarea
            value={comment}
            placeholder="comment"
            onChange={(e) => setComment(e.target.value)}
            cols="50"
            rows="3"
          />
        </label>
      </div>
    </form>
  );
}```
user_96917760

You can use flex properties of tailwind css to align them in a same row. Also I have wrapped the the two inputs in two separate rate divs.


export default function Display() {
  ...
  return (
    <form onSubmit={handleChange}>
      <div className="mb-4 align-middle flex flex-row items-center justify-center space-x-10">
        <div>
        <label>
          Title :
          <input
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="Title"
          />
        </label>
        </div>
        <div>
        <label>
          {" "}
          Comment :
          <textarea
            value={comment}
            placeholder="comment"
            onChange={(e) => setComment(e.target.value)}
            cols="50"
            rows="3"
          />
        </label>
        </div>
      </div>
    </form>
  );
}
user_109623640
Related