JSFiddle - React, Tailwind, and code Playground

by sarathsprakash

HTML

<div id='main'>
    <caption><cite>Dragonseye</cite> Table of Contents</caption>
    <div id='mainhead2'>
        <ul>
            <li scope="row"></li>
            <li><span>Prologue</span>

            </li>
            <li><span>1</span>

            </li>
        </ul>
        <ul>
            <li scope="row">1</li>
            <li><span>Early Autumn at Fort’s Galier</span>

            </li>
            <li><span>4</span>

            </li>
        </ul>
        <ul>
            <li scope="row">2</li>
            <li><span>Galier at Fort </span></li>
            <li><span>49</span>

            </li>
        </ul>
        <ul>
            <li scope="row">3</li>
            <li><span>Late Fall at Telgar Weyr</span>

            </li>
            <li><span>64</span>

            </li>
        </ul>
        <ul>
            <li scope="row">4</li>
            <li><span>Telgar Weyr and lie College</span>

            </li>
            <li><span>87</span>

            </li>
        </ul>
        <ul>
            <li scope="row">5</li>
            <li><span>Weyrling Barracks and Biula Hold</span>

            </li>
            <li><span>104</span>

            </li>
        </ul>
    </div>
</div>

CSS

body {
    width:100%;
}
ul {
    background: #f7f7ee;
    display:table;
    width:80%;
}
li {
    display:table-cell;
    text-align:left;
}
li:nth-last-child(1) {
    text-align:right;
}
ul:first-child li {
    padding:2px;
}
li:nth-last-child(3) {
 width:5%;
}