JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table-oil">

              <tr>
                <th class="caption">AGIP OSO</th>
                <th class="oil-types" colspan="12">
                  <div class="caption-wrapper">
                    <div class="caption-gost">Название<br>
                      по ГОСТ-у</div>

                    <div class="caption-gost-value">
                      <span class="oil-link" data-link-source="oil-1">ВМГЗ-45</span>
                      <span class="oil-link" data-link-source="oil-2">МГЕ-46В</span>
                      <span class="oil-link" data-link-source="oil-3">Гидромасло А</span>
                      <span class="oil-link" data-link-source="oil-4">ВМГЗ-45</span>
                      <span class="oil-link" data-link-source="oil-5">ВМГЗ-45</span>
                      <span class="oil-link" data-link-source="oil-6">ВМГЗ-45</span>
                    </div>

                    <div class="close" data-text-active="закрыть спецификацию" data-text-inactive="показать спецификацию">
                      показать спецификацию
                    </div>
                  </div>

                </th>
              </tr>


              <tr class="oil-series">
                <td class="oil-number-caption">Номер серии</td>
                <td data-source="oil-1">15</td>
                <td data-source="oil-2">22</td>
                <td data-source="oil-3">32</td>
                <td data-source="oil-3">46</td>
                <td data-source="oil-3">15</td>
                <td data-source="oil-3">22</td>
                <td data-source="oil-4">32</td>
                <td data-source="oil-4">6</td>
                <td data-source="oil-5">15</td>
                <td data-source="oil-6">22</td>
                <td data-source="oil-6">32</td>
                <td data-source="oil-6">46</td>
              </tr>

              <tr>
                <td class="oil-param">
                  Вязкость при 40°С
                </td>
               ...

CSS

body {
    min-height: 100%;
    background: #f4f4f4;
}
.table-oil {
  border-spacing: 0;
  margin-bottom: 23px;
  border-collapse: separate;
  width: 100%;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 10px;
  color: #bdbdbd;
  text-align: center;
  vertical-align: middle;
  background: #f4f4f4;
}
.table-oil .caption-wrapper {
  display: table;
  height: 100%;
}
.table-oil .line {
  display: table;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
.table-oil .line div {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  position: relative;
}
.table-oil .line div:after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: 1px;
  border-bottom: 1px solid white;
}
.table-oil tr {
  height: 100%;
}
.table-oil th {
  font-weight: normal;
}
.table-oil td,
.table-oil th {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 8px 0 8px;
  border-right: 1px solid #e8e8e8;
  background:...