JSFiddle - React, Tailwind, and code Playground

by piiantom

HTML

<table>
  <tr>
    <td><span>Proposed effective date</span></td>
    <td>02/12/2018</td>
  </tr>
  <tr>
    <td></td>
    <td>&nbsp;</td>
  </tr>
    <tr>
    <td><span>Each occurence limit</span></td>
    <td>200</td>
  </tr>
    <tr>
    <td><span>Personnal and something else limit</span></td>
    <td>100</td>
  </tr>
    <tr>
    <td><span>General something limit</span></td>
    <td>300</td>
  </tr>
    <tr>
    <td><span>Foo / Bar operations internal limitation</span></td>
    <td>300</td>
  </tr>
    <tr>
    <td><span>Damage to something you have in your limit</span></td>
    <td>100</td>
  </tr>
  <tr>
    <td></td>
    <td>&nbsp;</td>
  </tr>
    <tr>
    <td><span>Territory</span></td>
    <td>Territory</td>
  </tr>
  <tr>
    <td><span>Location</span></td>
    <td>1023 boulevard des tchecoslovaques 69000 LYON</td>
  </table>

CSS

table{
  font-family: Roboto, Arial;
  font-size: 14px;
  border-spacing: 0 10px;
}

table td{
  vertical-align: top;  
}
table td:nth-of-type(1){
  padding-right: 30px;
  position: relative;
}
table td:nth-of-type(1) span{
  padding-right: 4px;
  color: rgba(0,0,0,.7);
  background-color: #fff;
  position: relative;
  z-index: 1;
}
table td:nth-of-type(1):not(:empty):after{
  content: '';
  display: inline-block;
  vertical-align: middle;
}
table td:nth-of-type(1) span:before{
  height: 100%;
}
table td:nth-of-type(1):after{
  height: 1px;
  width: calc(100% - 4px);
  background-color: rgba(0,0,0,.15);
  position: absolute;
  top: .75rem;
  left: 0;
  margin-left: 4px;
  z-index: 0;
}
table td:nth-of-type(2){
  font-weight: bold;
  padding-left: 6px;
}