JSFiddle - React, Tailwind, and code Playground

by evgkch

HTML

<div class="descriptionTable">

  <div class="row">
    <div class="headCell">Category</div>
    <div class="cell">Integrated Circuits (ICs)</div>
  </div>
  <div class="row">
    <div class="headCell">Series</div>
    <div class="cell">Interface - Drivers, Receivers, Transceivers</div>
  </div>
  <div class="row">
    <div class="headCell">Family</div>
    <div class="cell">-</div>
  </div>
  <div class="row">
    <div class="headCell">Packaging</div>
    <div class="cell">Tape & Reel (TR)</div>
  </div>
  <div class="row">
    <div class="headCell">Type</div>
    <div class="cell">Transceiver</div>
  </div>
  <div class="row">
    <div class="headCell">Receiver Hysteresis</div>
    <div class="cell">Transceiver</div>
  </div>
  <div class="row">
    <div class="headCell">Data Rate</div>
    <div class="cell">120Kbps</div>
  </div>
  <div class="row">
    <div class="headCell">Voltage - Supply</div>
    <div class="cell">4.5 V ~ 5.5 V</div>
  </div>
  <div class="row">
    <div class="headCell">Operating Temperature</div>
    <div class="cell">-40°C ~ 85°C</div>
  </div>
  <div class="row">
    <div class="headCell">Package / Case</div>
    <div class="cell">16-SOIC (0.295", 7.50mm Width)</div>
  </div>

</div>

CSS

.descriptionTable {
  width: 100%; 
  border: 1px solid black;
  float:left;
}
.row {
  border: 1px solid black;
  display:table;
  width: 50%;
  height: 40px;
}
.headCell, .cell {
  display: table-cell;
  width: 50%;
  vertical-align: middle;
  padding-left: 5px;
}