JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box clearfix">
    <div class="height_block"></div>
    <div id="myid" style="display:none;"> <div class="content">some stuff here</div></div>
</div>

CSS

.box {
    border: solid 1px red;
    width: 500px;
}

.height_block {
    height: 50px;
    width: 1px;
    float: left;
}

#myid {
    border: solid 1px green;
    float: left;
    width: 497px;
}

.content {
    height: 100px;
}

/* cleafix css */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
}
 
html[xmlns] .clearfix {
    display: block;
}
 
* html .clearfix {
    height: 1%;
}

JavaScript

$(function () {
    $("#myid").slideToggle("slow");
});