JSFiddle - React, Tailwind, and code Playground

by Premchand R

HTML

<div class="container rows">
  <div class="table-fixed-left col-sm-3 col-md-6 cols">
    <table class="wrapper">
      <tr>
        <th>Type of Charging Station</th>
      </tr>
      <tr>
        <td>100 kW DC Quick Charging</th>
      </tr>
      <tr>
        <td>50 kW DC Quick Charging</th>
      </tr>
      <tr>
        <td>200-V Home Charging</th>
      </tr>
    </table>
  </div>
  <div class="table-fixed-right col-sm-9 col-md-6 cols">
    <table class="wrapper">
      <tr>
        <th>Charging Times</th>

      </tr>
      <tr>
        <td>46minutes= charge de 80%</td>

      </tr>
      <tr>
        <td>60minutes= charge de 80%</td>

      </tr>
      <tr>
        <td>11h30min= charge Ă  100%
        </td>

      </tr>

    </table>
  </div>
</div>

CSS

.table-fixed-left table,
.table-fixed-right table {
  border-collapse: collapse;
}

.table-fixed-right td,
.table-fixed-right th,
.table-fixed-left td,
.table-fixed-left th {
  padding: 10px 10px;
  border: 1px solid #ddd;
}

.table-fixed-left th,
.table-fixed-right th {
  @include fntBrandBold;
  text-transform: uppercase;
}

.table-fixed-left {
  float: left; // white-space: nowrap;
  text-align: left;
  z-index: 2;
  padding-left: 0px;
  padding-right: 0px;
}

div.table-fixed-left>table>tbody>tr:first-child>th:first-child {
  background-color: #E9E9E9;
}
.table-fixed-right {
  overflow-x: scroll;
  padding-left: 0px;
  padding-right: 0px;
}
.wrapper {
  width: 400px;
}

.rows {
  display: flex;
}

.cols {
  flex: 1;
}