JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
            <div id="overview">
                
                
                <div  class="item">
                    <div class="item-preview">Test</div>
                    <div class="item-content">Das ist ein Test mit viel Text rund um den Test Preview zeugs</div>
                </div>
                
                <div  class="item">
                    <div class="item-preview">Test</div>
                    <div class="item-content">Das ist ein Test mit viel Text rund um den Test Preview zeugs</div>
                </div>
                
                <div  class="item">
                    <div class="item-preview">Test</div>
                    <div class="item-content">Das ist ein Test mit viel Text rund um den Test Preview zeugs</div>
                </div>
                
                <div  class="item">
                    <div class="item-preview">Test</div>
                    <div class="item-content">Das ist ein Test mit viel Text rund um den Test Preview zeugs</div>
                </div>
                
                <div  class="item">
                    <div class="item-preview">Test</div>
                    <div class="item-content">Das ist ein Test mit viel Text rund um den Test Preview zeugs</div>
                </div>
                
                <div  class="item">
                    <div class="item-preview">Test</div>
                    <div class="item-content">Das ist ein Test mit viel Text rund um den Test Preview zeugs</div>
                </div>
                
                <div  class="item">
                    <div class="item-preview">Test</div>
                    <div class="item-content">Das ist ein Test mit viel Text rund um den Test Preview zeugs</div>
                </div>
                
                <div  class="item">
                    <div class="item-preview">Test</div>
                    <div class="item-content">Das ist ein Test mit viel Text rund um...

CSS

.wrapper {
    max-width: 613px;
    float: left;
    position: relative;
}
.new {
    border: solid 1px #ddd;
    padding: 5px;
    float: left;
    max-width: 660;
    min-width: 320px;
}
.item {
    width: 120px;
    padding: 10px;
    display: block;
    background-color: #CCC;
    float: left;
    margin: 5px;
    position: relative;
}

    .item .item-preview {
        position: relative;
        z-index: 10;
        display: block;
    }

    .item .item-content {
        /*display: none;*/
       position: absolute;
       left: 0px;
       top: 37px;
       padding: 5%;
       z-index: 11;
       width: 90%;
       background-color: #000;
       color: #FFF;
    }

.content {
    padding: 10px;
    height: 80px;
    visibility: hidden;
}
.item:hover > .content {

}
.full {
    position: absolute;
    width: 100%;
    display: block;
    height: 100px;
    background-color: #666;
    left: 0px;
}

JavaScript

window.addEvent('domready', function() {
	var myAccordion = new Fx.Accordion($$('.item-preview'), $$('.item-content'), {
    display: -1,
    alwaysHide: true
});
    });