JSFiddle - React, Tailwind, and code Playground

by Fabio Dan

HTML

<div class="table">
  <div class="row header">
    <div class="column">Label1</div>
    <div class="column">Label2</div>
    <div class="column">Label3</div>
    <div class="column">Label4</div>
  </div>
  <div class="row">
    <div class="column"><strong>Label1: </strong>FOO1</div>
    <div class="column"><strong>Label2: </strong>FOO2</div>
    <div class="column"><strong>Label3: </strong>FOO3</div>
    <div class="column"><strong>Label4: </strong>FOO4</div>
  </div>
  <div class="row">
    <div class="column"><strong>Label: </strong>FOO1</div>
    <div class="column"><strong>Label: </strong>FOO2</div>
    <div class="column"><strong>Label: </strong>FOO3</div>
    <div class="column"><strong>Label: </strong>FOO4</div>
  </div>
  <div class="row">
    <div class="column"><strong>Label: </strong>FOO1</div>
    <div class="column"><strong>Label: </strong>FOO2</div>
    <div class="column"><strong>Label: </strong>FOO3</div>
    <div class="column"><strong>Label: </strong>FOO4</div>
  </div>
  <div class="row">
    <div class="column"><strong>Label: </strong>FOO1</div>
    <div class="column"><strong>Label: </strong>FOO2</div>
    <div class="column"><strong>Label: </strong>FOO3</div>
    <div class="column"><strong>Label: </strong>FOO4</div>
  </div>
</div>

CSS

.table {
  display: table;
}
.row {
  display: table-row;
}
.row.header {
  font-weight: bold;
}
.column {
  display: table-cell;
  border: solid 1px #CCC;
  padding: 2px;
}
strong {
  display: none;
}

@media screen and (min-width > 480px) {
  .row.header {
    display: none;
  }
  strong {
    display: inline;
  }

}