JSFiddle - React, Tailwind, and code Playground

by Bianca Kuehweidner

HTML

<div id="wrapper">
    
    <table class="table1">
      <tr>
        <thead>
          <th colspan="2">Termin</th>
        </thead>
      </tr>
      <tr>
        <td>Di</td>
        <td>12.12.2017</td>
      </tr>
      <tr>
        <td>Di</td>
        <td>19.12.2017</td>
      </tr>
      <tr>
        <td>Mi</td>
        <td>13.12.2017</td>
      </tr>
      <tr>
        <td>Mi</td>
        <td>20.12.2017</td>
      </tr>
      <tr>
        <td>Fr</td>
        <td>15.12.2017</td>
      </tr>
      <tr>
        <td>Fr</td>
        <td>22.12.2017</td>
      </tr>
    </table>    

    <div class="table2">
    <table>
      <tr>
        <thead>
           <th class="duration">0</th>
           <th class="duration">1</th>
           <th class="duration">2</th>
           <th class="duration">3</th>
           <th class="duration">4</th>
           <th class="duration">5</th>
           <th class="duration">6</th>
           <th class="duration">7</th>
           <th class="duration">8</th>
           <th class="duration">9</th>
           <th class="duration">10</th>
           <th class="duration">11</th>
           <th class="duration">12</th>
           <th class="duration">13</th>
           <th class="duration">14</th>
           <th class="duration">15</th>
        </thead>
      </tr>
      <tr>
        <td class="duration">12</td>
       <td class="duration">14</td>
       <td class="duration">21</td>
       <td class="duration">11</td>
       <td class="duration">15</td>
       <td class="duration">19</td>
       <td class="duration">20</td>
       <td class="duration">102</td>
       <td class="duration">56</td>
       <td class="duration">89</td>
       <td class="duration">45</td>
       <td class="duration">20</td>
       <td class="duration">102</td>
       <td class="duration">56</td>
       <td class="duration">89</td>
       <td class="duration">45</td>       
      </tr> 
      <tr>
       <td class="duration">12</td>
       <td...

CSS

body { 
  padding: 20px;
}

table {
    border-collapse:collapse;
}

th,td {
    padding: 5px;
    border: 1px solid #000;
    white-space: nowrap;
    }
    
th { font-weight: bold; }
    

.table1, .table3 {
    float: left;   
}        
.table2 {
    float: left;
    width: 300px;
    overflow: auto;  
}

#wrapper {
  width: auto; 
  height: 120px; 
  overflow-y: scroll
}