JSFiddle - React, Tailwind, and code Playground

HTML

<div class="head">
  <div class="Table-row">
    <div class="Table-row-item" data-header="First Name">Gyandeep</div>
    <div class="Table-row-item" data-header="Last Name">Singh</div>
    <div class="Table-row-item" data-header="Job Title">Software Engineer</div>
  </div>
</div>

CSS

*,
*:before,
*:after {
  box-sizing: border-box;
}
.Table-row {
  border: 0.5px solid #cccccc;
}
.Table-row-item {
  word-wrap: break-word;
  word-break: break-word;
  padding: 0.5em;
}
.Table-row-item:before {
  content: attr(data-header);
  width: 40%;
  font-weight: 700;
  display: inline-block;
}