JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <h1>THE BODAK</h1>
</div>

<ul>
    <li><a href="history.php">Back</a></li>
    <li><a href="#" class="link" id="link" data-title="Anthony" data-alias="Alias: Lysander Lucretius II" data-bio="A human cleric who worships Verum-Die, speaks many languages and talks much better than he hits. Has been seen with a black gem and a white gem lodged in his chest.">Anthony</a></li>
    <li><a href="#" class="link" id="link2" data-title="Ben" data-alias="Alias: Nishi Kani-Orc Garland-Human" data-bio="Not much is known about the rogueish character, it is known though that he is sneaky and acrobatic. He has been seen feeding a cat, and has said he will not use his shape-shifitng abilities to commit crimes.">Ben</a></li>
    <li><a href="#" class="link" id="link3" data-title="Jacob" data-alias="Alias: Max" data-bio="The large half-giant is crippled and bound to a magic chair, however this giant has mastery over some sort of telekenetic arts.">Jacob</a></li>
    <li><a href="#" class="link" id="link4" data-title="Jesse" data-alias="Alias:Kuso Oma" data-bio="The age isnt the only mystery sourrounding this women, seemingly being able to summun demon-like abilities at will and laughing in the face of danger. Has stated her race comes from deep underground.">Jesse</a></li>
    <li><a href="#" class="link" id="link5" data-title="Karmar" data-alias="Alias:Zota" data-bio="A human cleric who worships Verum-Die, speaks many languages and talks much better than he hits. Has been seen with a black gem and a white gem lodged in his chest.">Karmar</a></li>
    <li><a href="#" class="link" id="link6" data-title="Alias:Drudder" data-alias="Alias: Lysander Lucretius II" data-bio="This drow definitely practices some dark arts, but has already risked his life to save one of the groups memebers. Was caught in some shady dealings with rat-folk.">Mitchell</a></li>
</ul><br><br><br><br>

<h2 id="name">Anthony</h2>
<div id="alias">Alias: Lysander Lucretius II</div><br>
<div...

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 10%;
    background-color: #457585;
    margin-left: -1%;
    float: left;
}

li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #555;
    color: white;
}

#header {
    float: left;
    min-width: 100.4%;
    background: #26596A;
    text-align: center;
    padding: 5px;
    margin-top: -10px;
    margin-left: -10px;
}

#dice {
    line-height: 30px;
    background-color: #457585;
    height: 100%;
    width: 10%;
    float: right;
    padding: 5px;
    margin-right: -0.4%;
    text-align: center;
}

#nav {
    line-height: 30px;
    background-color: #eeeeee;
    height: 100%;
    width: 10%;
    float: right;
    padding: 0;
    text-align: center;
    margin-right: -7px;
}

#section {
    width: 350px;
    padding: 10px;
    float: left;
}

html {
    height: 100%;
}

body {
    background-color: #6C929F;
    height: 80%;
}

#alias,
#bio {
    word-wrap: break-word;
    width: 100%
}

JavaScript

$(document).ready(function() {
    $('.link').on('click', function() {
        var $el = $(this);
        $('#name').text($el.data('name'));
        $("#alias").text($el.data('alias'));
        $("#bio").text($el.data('bio'));
    });
});