JSFiddle - React, Tailwind, and code Playground

HTML

<div class="list-bkg">
        <div class="list nav">
            <span>serious 1</span><br />
            <span>serious 2</span><br />
            <span>serious 3</span><br />
        </div>
    </div>
    
    <div class="piece-bkg">
        <div class="piece">
            <iframe width="560" height="315" src="http://www.youtube.com/embed/7TEq3iyifpQ" frameborder="0" allowfullscreen></iframe>
            <br /> <br />
            important info<br/>
            helpful<br />
            cool<br />
        </div>
    </div>

CSS

html, body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    min-width: 1024px;
    min-height: 768px;
}
.list-bkg {
    float: left;
    position: absolute;
    top: 0px;
    z-index: 75;
    width: 36.29%;
    padding-top: 10%;
    height: 90%;
    background-color: rgba(0, 0, 0, 0.65);
    font-family: monospace;
    color: white;
    text-align: center;
}

.piece-bkg{
    float: left;
    position: absolute;
    top: 0px;
    z-index: 75;
    width: 63.71%;
    padding-top: 10%;
    height: 90%;
    background-color: rgba(0, 0, 0, 0.65);
    font-family: monospace;
    color: white;
    left: 36.29%;
    display: none;
}

.piece {
    position: relative;
    margin-top: 5.8%;
    height: 74%;
    left: 2%;
    padding-top: 2%;
    padding-right: 2%;
    font-size: 18px;
    background-color: rgba(211, 58, 146, 0.8);
    float: left;
    text-align: center;
    max-width: 600px;
    padding-left: 2%;
}

.list {
    position: relative;
    margin-top: 5.8%;
    height: 74%;
    left: 8.97%;
    width: 82%;
    padding-top: 2%;
    padding-right: 2%;
    font-size: 18px;
    text-align: right;
    background-color: rgba(211, 58, 146, 0.8);
}

JavaScript

var pieceOPEN = false;
        $(document).ready(function(){

        
            $(".nav span").click(function(){
                if (pieceOPEN){
                    $(".piece-bkg").slideUp("slow");
                    pieceOPEN = false;
                } else {
                    $(".piece-bkg").slideDown("slow");
                    pieceOPEN = true;
                }
                })
            });
        
        
        function openPiece(thePiece) {
            var yrPiece = thePiece;
            if (pieceOPEN){
                $(".piece-bkg").slideUp("slow");
                pieceOPEN = false;
                openPiece(yrPiece);
            } else {
                $(yrPiece).slideDown("slow");
                pieceOPEN = true;
            }
        }