JSFiddle - React, Tailwind, and code Playground

by chrisloughnane

HTML

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

CSS

.container {
  border: 1px solid red;
  width: 200px;
  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 */
}