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 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 3</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 {
  /* align-self: flex-end; */
}
input {
    display: block;
}