JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.portalzine.de/Horizontal_Accordion_Plugin_2/lib/jquery.hrzAccordion.js"></script>
<link rel="stylesheet" href="http://www.portalzine.de/Horizontal_Accordion_Plugin_2/css/jquery.hrzAccordion.defaults.css">
<div id="containingDiv">
    <ul id="myAccordion">
        <li>
            <div class="handle">1
            </div>
            <div class="myContent">
                CONTENT 1
            </div>
        </li>
        <li>
            <div class="handle">2
            </div>
            <div class="myContent">               
                CONTENT 2
            </div>
        </li>
    </ul>
</div>

CSS

#containingDiv {
    height : 200px;
    width : 460px;
    overflow: hidden;
}

#myAccordion {
    width: 2000px;
}

.handle {
    height : 200px;
    width : 30px;
    background : #aaaaaa;
    margin : 0px;
    padding : 0px;
}

.handleSelected {
    background : #eeeeee;    
}

.myContent {
    height : 200px;
    width : 400px;
    background : #44eeee;
    margin : 0px;
}

p {
    margin : 0px;
    padding : 0px;
}

h1 {
    margin : 0px;
    padding : 0px;
}

div {
    margin : 0px;
    padding : 0px;
}

.contentContainer {
    padding : 0px;
    margin : 0px;
}

.contentInnerWrapper {
    padding : 0px;
    margin : 0px;
}

JavaScript

$("#myAccordion").hrzAccordion({
    fixedWidth : "400",
    handlePosition : "left",
    openOnLoad     : 1
});