JSFiddle - React, Tailwind, and code Playground

by Alexandre Krabbe

HTML

<div class="main-wrapper">
    <button id="hide-show" name="Click me">Click me</button>
    <div id="panel">
        <div class="wrapper">
            <div class="col">
                <p>Hello world! 2</p>
                <div id="img-1" class="images"></div>
            </div>
            <div class="col" id="testing">
                <p>Hello world! 3</p>
            </div>
            <div class="col">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit
                    beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque,
                    voluptate fugiat impedit beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adipisicing elit. Suscipit veniam quisquam,
                    rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit
                    beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adi</p>
            </div>
        </div>
    </div>

    <p>Hello world! 4</p>
    </div>

CSS

.main-wrapper{
            margin: 0 auto;
            width: 70%;
        }
        
        #panel{
            width: 100%;
            background-color: aqua;
            display: none;
            position: relative;
            float: left;
        }
        .wrapper{
            width: 100%;
        }
        .images{
            width: 100%;
        }
        #img-1{
            background: url("http://lorempixel.com/output/people-q-c-640-480-1.jpg") no-repeat center;
            background-size:contain;
            height: 300px;
            width: 100%;
        }
        .col {
            width: 32%;
            float: left;
            overflow: hidden;
            background: red;
            border: 2px solid black;
        }

        .col:last-child{
            float: right;
        }

        #testing{
            background: yellow;
            margin: 0 auto;
        }

JavaScript

$(document).ready(function(){
        $("#hide-show").click(function(){
            $("#panel").slideToggle();
        });
    });