JSFiddle - React, Tailwind, and code Playground

HTML

<div class="glossary">
                <div class="title">Glossary</div>
                <div class="glossarySelector">
                    <ul>
                        <li><a href="#">A</a></li>
                        <li><a href="#">B</a></li>
                        <li><a href="#">C</a></li>
                        <li><a href="#">D</a></li>
                        <li><a href="#">E</a></li>
                    </ul>
                    
                </div>
                <div class="clearFix"></div>
                <section>
                    <div class="title">A</div>
                    <div class="subTitle">A&E</div>
                    <div class="content">
                        Ut wisi enim ad minim veniam, quis ambulance exerci tation ullamcorper
                         suscipit lobortis nisl ut aliquip ex ea commodo nibh euismod tincidunt
                         ut laoreet dolore magna aliquam erat volutpat.
                    </div>

                </section>


            </div>

CSS

.glossary
{
    float: left;
    width: 460px;
}
.glossary .title
    {

color: white;
    font-weight: bold;
    padding-left: 18px;
    height: 60px;
    line-height: 60px;
    font-size: 1.5em;
    background-color: #003300;
    }

    .glossarySelector
    {
    background-color: #ff0000;
    overflow:hidden;  
    }

    .glossary ul
    {
        background: #EFEFEF;
        position: relative;
        left: 30px;
    }

    .glossary li
    {
        color: #003300;
        font-size: 1.5em;
        padding: 5px;
        margin: 10px;
        display: block;
        float: left;
    }

        li:hover
        {
            background-color: darkGray;
        }

    section .title
        {
            background-color: #009966;
            float: left;
            text-align: center;
            height: 30px;
            line-height: 30px;
            padding: 10px 15px;
            margin: 0 0 20px;
        }

        section .subTitle
        {
            clear: both;
            margin-bottom: 25px;
            color: #003300;
            font-size: 0.9em;
            font-weight: bolder;
        }

        section .content
        {
            font-size:0.8em;
            text-align:left;
            color:#585859;
        }
    
.clearFix
{
    clear: both;
}