JSFiddle - React, Tailwind, and code Playground

by chrisloughnane

HTML

<div class="container">
  <div class="item">
    <label>Input 1 </label>
    <input type="text" placeholder="Input 1">
  </div>
  <div class="item">
    <label>Input 2 Input 2 Input 2 Input 2 Input 2 Input 2 Input 2 Input 2</label>
    <input type="text" placeholder="Input 2">
  </div>
  <div class="item">
    <label>Input 2</label>
    <input type="text" placeholder="Input 3">
  </div>
</div>

CSS

.container {
  border: 1px solid red;
  width: 100%;
  display: flex;
  gap: 40px; /* Optional: Adds space between inputs */


}

.container input {
  flex: 1; /* Makes each input take an equal portion of the container */
  min-width: 0; /* Prevents inputs from overflowing if the container shrinks */

}
.item {
  /* vertical-align: bottom; */



}