JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="input-grid border rounded">
  <label for="" class="input-grid-label">Something quite a bit longer</label>
  <input type="text" class="form-control border-0">
  <label for="" class="input-grid-label">Short</label>
  <input type="text" class="form-control border-0">
  <label for="" class="input-grid-label">Item 3</label>
  <input type="text" class="form-control border-0">
  <label for="" class="input-grid-label">Item 4</label>
  <input type="text" class="form-control border-0">
</div>

CSS

body {
  padding: 1rem;
}
.input-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-column-gap: .5rem;
  align-items: center;
}
.input-grid-label {
  display: block;
  height: 100%;
  border-bottom: 1px solid #ccc;
  font-size: 85%;
  padding-left: 16px;
}