JSFiddle - React, Tailwind, and code Playground

by Rahul

HTML

<header>
    <span id="click-me-relative">Relative</span>
    <span id="click-me-absolute">Absolute</span>
    
    <div id="relative">Relative</div>
    <div id="absolute">Absolute</div>
</header>
<div></div>

CSS

div {
    width: 200px;
    height: 300px;
    border: 1px solid black;
}

header {
    border: 1px solid black;
    height: 30px;
}

span {
    background-color: #dedede;
}

#relative, #absolute {
    background-color: blue;
    height: 100px;
    width: 200px;
    display: none;
}

#relative { position: relative; }
#absolute { position: absolute; }

JavaScript

$(function() {
    $('#click-me-relative').click(function() {
        $('#relative').slideToggle();
    });
    
    $('#click-me-absolute').click(function() {
        $('#absolute').slideToggle();
    });
});