JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
    <div class="inner-box">
        <div class="dv">1 <span></span></div>
        <div class="dv">2 <span></span></div>
        <div class="dv">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam laborum, aspernatur dignissimos facilis voluptatum praesentium reprehenderit hic, sunt veniam cupiditate dolores repellendus distinctio, quae maxime? Facere aliquid earum, officiis ut! <span></span></div>
        <div class="dv">555 <span></span></div>
    </div>
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, neque et cupiditate blanditiis. Quibusdam illo reiciendis perspiciatis deleniti fuga, expedita, quis alias aliquam minima quisquam ut impedit totam, qui ex.
    </div>
</div>

CSS

body {
    margin: 0;
}
* {
    box-sizing:border-box;
}
div.box {
    font-size: 0px;
    width: 90%;
    margin: 20px auto;
}
div.inner-box {
    border: 1px solid black;
}
div.dv {
    display: inline-block;
    font-size: 16px;
    width: 25%;
    position: relative;
    padding: 0 10px;
    vertical-align: middle;
}
div.dv span {
    position: absolute;
    width: 1px;
    height: 20px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    background: black;
}
div.content {
    font-size: 16px;
    display: none;
}

JavaScript

$('.box').click(function(){
	$('.content').slideToggle();
})