JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<h1>7 reasons why trainers like our books</h1>
<aside></aside>	
<article>
	<h2>Modularbook organization</h2>
	<p>In the first section or two of all our books, we present the core content
	for the book, which includes a complete subset of usable skills. After the core
	content, each section of the book is designed as an independent module. This
	means that these sections don't have to be taught in sequence. As a result, you
	can customize your courses by assigning just those sections that you want to
	teach.</p>
	<p>Whenever possible, each of the chapters is also <span>designed as an independent
	module</span>. When this is true, you can assign just those chapters that are right
	for your courses. This approach also makes the chapters better for on-the-job
	reference later on.</p>
	
	<h2>Top-down chapter design</h2>
	<p>Unlike many competing books and products, most chapters in our books have a
	unique top-down design that moves from the simple to complex. This makes it
	easier for trainees to learn. It also means that you can present the topics at
	the start of a chapter to make sure everyone understands the essential details,
	without presenting all of the topics in a chapter. Then, your trainees can
	learn the other topics on their own or as they're needed on the job.</p>
	
	<h2>Paired-pages format</h2>
	<p>If you page through one of our books, you'll see that all of the information
	is presented in &quot;paired pages.&quot; In each pair, the right page is a
	figure that contains the syntax, guidelines, and examples, and the left page is
	text that contains the perspective and extra explanation.</p>
	<p>One benefit of this format is that it lets trainees <span>learn at their own pace</span>.
	If, for example, you're a novice, you'll probably want to read the text on the
	left as you refer to the figure on the right. But if you have experience, you
	may be able to get all the information you need from the figure. Either way,
	our customers tell us that...

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 81.25%;
    width: 720px;
    margin: 0 auto;
    padding: 20px;
    border: 3px solid blue;
    position: relative;
}
aside, article {
	margin: 0;
	padding: 0;
}
h1, h2, ul, p, a {
	margin: 0;
	padding: 0;
}
aside {
	width: 240px;
	float: left;
	position: absolute;
}
aside a {
	display: block;
	font-size: 100%;
	padding-bottom: .5em;
}
article {
	width: 440px;
	margin-left: 260px;
}
h1 {
	padding-bottom: .25em;
	color: blue;
}
h2 {
	font-size: 120%;
	padding: .5em 0 .25em;
    color: black;
}
h2.active {
    color: blue;
    font-size: 150%;
}
}
p {
	padding-bottom: .5em;
}

JavaScript

jQuery(function ($) {
    var toc = $("aside").append("<h2>Table of content</h2>");

    var headings = $("article h2").each(function (index) {
        var id = "heading" + (index + 1),
            heading = $(this).attr('id', id);
        $('<a>').attr('href', '#' + id).text(heading.text()).appendTo(toc);
    }).before('<a href="#top">Back to top</a>');

    $("h1").attr('id', 'top');
    $("article a:first").remove();
    $("article p:last").after("<a href = '#top'>Back to top</a>");

    $('aside').on('click', 'a', function(e) {
        headings.removeClass('active');
        $(this.hash).addClass('active');
    });
});