JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <style type="text/css" media="screen">
            * { margin: 0; padding: 0; } 
            body { background-color: #fff; font: 16px Arial; color: #000; } 
            dt { }  
            dd { height: 100px; } 
        </style> 
    </head>
    <body>
        <div id="galColumn">
            <div class="contentbox">
                <dl> 
                    <dt class="factterm">
                        <a id="A1" href="javascript://" class="questionLink">
                            Question1</a>
                    </dt> 
                    <dd id="1" class="answer">
                        <div class="indent-box">
                            Answer1
                        </div>
                    </dd> 
                    <dt class="factterm">
                        <a id="A2" href="javascript://" class="questionLink">
                            Question2</a>                    
                    </dt> 
                    <dd id="2" class="answer">
                        <div class="indent-box">
                            Answer2
                        </div>
                    </dd> 
                    <dt class="factterm">
                        <a id="A3" href="javascript://" class="questionLink">
                            Question3</a>                    
                    </dt> 
                    <dd id="3" class="answer">
                        <div class="indent-box">
                            Answer3
                        </div>
                    </dd> 
                    <dt class="factterm">
                        <a id="A4" href="javascript://" class="questionLink">
                            Question4</a>                           
                    </dt> 
                    <dd id="4" class="answer">
                        <div class="indent-box">
                            Answer4
               ...

CSS

#galColumn {
    background-color:#E4EAEF;
    padding: 10px;
    height: 220px;
}
.contentbox {
    width:140px;
    padding:10px;
    margin:0 0 0 0;
    float: left;
    background-color:orange;
}
.contentbox2 {
    width:140px;
    padding:10px;
    margin:0 0 0 0;
    float: left;
    background-color:green;
}
.indent-box {
    padding: 5px;
}
.factterm {
    /*margin-top: 2px;*/
    /*padding: 2px 5px 0;*/
    /*width: 525px;*/
    padding-bottom: 8px;
}
.answer {
    background-color: #F9FBFC;
    /*padding: 2px 5px 0;*/
    /*width: 525px;*/
}
#accordion .handle{     
    width: 260px;     
    height: 30px;     
    background-color: orange; 
} 
#accordion .section {     
    width: 260px;     
    height: 445px;       
    overflow: hidden;     
    position: relative; 
} 
.active {background:#a9a9a9}

JavaScript

$.fn.accordion = function() {
    return this.each(function() {
        $container = $('#galColumn');

        // Hijack handles.
        $container.find("dt").each(function() {
            var $header = $(this);
            var $selected = $header.next();

            $header.click(function() {
                $('.active').removeClass('active');
                $(this).addClass('active');
                if ($selected.is(":visible")) {
                    $selected.animate({
                        height: 0
                    }, {
                        duration: 300,
                        complete: function() {
                            $(this).hide();
                        }
                    });
                } else {
                    $unselected = $container.find("dd:visible");
                    $selected.show();
                    var newHeight = heights[$selected.attr("id")];
                    var oldHeight = heights[$unselected.attr("id")];

                    $('<div>').animate({
                        height: 1
                    }, {
                        duration: 300,
                        step: function(now) {
                            var stepSelectedHeight = Math.round(newHeight * now);
                            $selected.height(stepSelectedHeight);
                            $unselected.height(oldHeight + Math.round((newHeight - oldHeight) * now) - Math.round(newHeight * now));
                        },
                        complete: function() {
                            $unselected.hide().css({
                                height: 0
                            });
                        }
                    });
                }
                return false;
            });
        });

        // Iterate over panels, save heights, hide all.
        var heights = new Object();
        $container.find("dd").each(function() {

            $this = $(this);
            $this.css("overflow", "hidden");
   ...