JSFiddle - React, Tailwind, and code Playground

by piiantom

HTML

<div class="wrapper">
  <div class="row">
  <label>Yo</label>
  <span>TOTOTO</span>
  </div>
  <div class="row">
  <label>YoYoYoYoYoYo</label>
  <span>TOTOTO</span>
  </div>
  <div class="row">
  <label>YoYo</label>
  <span>TOTOTO</span>
  </div>
  <div class="row">
  <label>Yo YoYoYoYoYoYoYoYoYo</label>
  <span>TOTOTO</span>
  </div>
  <div class="row">
  <label>YoYo</label>
  <span>TOTOTOTOTOTO</span>
  </div>
  <div class="row">
  <label>YoYoYo YoYoYoYo</label>
  <span>TOTOTO</span>
  </div>
  </div>

CSS

.wrapper {
  display: table;
}
.row {
  display: table-row;
}
.row > * {
  display: table-cell;
  vertical-align: middle;
}
label {
  max-width: 180px;
  white-space: wrap;
}