JSFiddle - React, Tailwind, and code Playground

by Chamster

HTML

<div class="data-row">

  <div class="data-row-cell data-row-caption">{{caption that is really long}}</div>

  <div class="data-row-cell data-row-value">    {{data}}  </div>
  <div class="data-row-cell data-row-value">    {{data}}  </div>
  <div class="data-row-cell data-row-value">    {{data}}  </div>
  <div class="data-row-cell data-row-value">    {{data}}  </div>
  <div class="data-row-cell data-row-value">    {{data}}  </div>


</div>

CSS

div.data-row-json {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 12px;
}

div {
  font-size: 18px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  overflow: hidden;
}

div.data-row {
  display: flex;
  width: 100%;
  padding: 2px;
  border: 3px solid orange;
  overflow: hidden;
}

div.data-row-cell {
  display: flex;
  padding: 3px;
  border: 2px solid white;
  overflow: hidden;
}

div.data-row-caption {
  text-align: left;
  flex: 1;
  border-color: greenyellow;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

div.data-row-value {
  text-align: right;
  flex: 1;
  border-color: lightblue;
}