JSFiddle - React, Tailwind, and code Playground

by Nimitt Shah

HTML

<div class="container">
  <h2>
  Table of Contents
  </h2>
  <table>
  <tr class='level-0'>
    <td class="text" colspan="2">First level index element</td>
    <td class="page" align="right" valign="bottom">1</td>
  </tr>
  <tr class="level-1">
    <td class="incipit" valign="top">Art. 1</td>
    <td class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel elementum erat. In non magna tellus. Donec id tellus ut leo consequat elementum. Praesent eu ligula in neque ultricies mollis sit amet sed risus.</td>
    <td class="page" align="right" valign="bottom">1</td>
  </tr>
  <tr class="level-2">
    <td class="incipit" valign="top">Art. 2</td>
    <td class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel elementum erat. In non magna tellus. Donec </td>
    <td class="page" align="right" valign="bottom">2</td>
  </tr>
  </table>
</div>

CSS

.container {
  width: 600px;
  text-align: justify;
  font-family: 'Arial Narrow', arial, sans-serif;
}

table {
  width: 100%;
}

.incipit {
  width: 10%;
}
td{  
overflow: hidden;
    position: relative;
}

.text { 
  width: 90%;
}
.text:after{
    content: " ....................................................................................................................... ";
    position: absolute;
    padding-left: 5px;
}

.page {
  width: 15px;
}

.level-0 > .text {
  width: 100%;
}

.level-0 {
  font-weight: bold;
}

.level-1, .level-2 {
  font-weight: bold;
}