JSFiddle - React, Tailwind, and code Playground

by Premchand R

HTML

<div class="container">
  <div class="table-fixed-left cols">
    <table class="wrapper">
      <tr>
        <th>Type of Charging Station</th>
      </tr>
      <tr>
        <td>100 kW DC Quick Charging</th>
      </tr>      
    </table>
  </div>
  <div class="table-fixed-right cols">
    <table class="wrapper">
      <tr>
        <th>Charging Times</th>

      </tr>
      <tr>
        <td>46minutes= charge de 80%</td>
      </tr>  
    </table>
    <table class="wrapper">
      <tr>
        <th>Charging Times</th>

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

CSS

td,th{
  padding: 10px 10px;
  border: 1px solid #ddd;
}
th{  
  text-transform: uppercase;
  font-weight:bold;
}
.table-fixed-right {
  overflow-x: auto;
}
.cols{
  float: left;
  width:50%;
  display:inline-block;
}
.cols .wrapper{
  border-spacing: 0px;
  width:400px;
}
.table-fixed-right .wrapper{  
  display:inline-block;
}