JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<div class="SubPageContainer">
        <table class="tblAccordHolder">
            <tr>
                <td>
                    <div class="accordinHeader">
                        Header 1
                    </div>
                    <div class="accordinContent">
                        Content 1
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="accordinHeader">
                        Header 2
                    </div>
                    <div class="accordinContent">
                        Content 2
                    </div>
                </td>
            </tr>
        </table>
    </div>
</html>

CSS

body 
{
    width:100%;
    height:100%;
}

.SubPageContainer
{
    position:relative;
    display:block;
    height:90%;
    width:100%;   
}

.tblAccordHolder
{
    margin-top:30px;
    width:800px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
}

.accordinHeader
{
    position:relative;
    width:800px;
    text-align:left;
    font-weight:bold;
    background-color:Orange;
    min-height:25px; 

    
   
}

.accordinContent
{
    text-align:center;
    background-color:White;    
    min-height:100px;   
}

JavaScript

$(document).ready(function() {
    $(".accordinHeader").click(function() {
        $(".accordinContent").slideToggle();
    });

});