JSFiddle - React, Tailwind, and code Playground

by Mawel Don

HTML

<div class="wrapper">
    <p>Some text and descriptions</p>
    <div class="widget box-wrap">
        <div class="box"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
    </div>
    <p>Some more text and description and some more offcourse and a bit more, and just a tiny bit more</p>
</div>

CSS

.wrapper { 
    width:300px; 
    display:block; 
    position:relative;
    overflow:hidden;
    background-color:gray;
}
.widget {
    width:300px;
    height:300px;
    display:block;
    position:relative;
    background-color:green;
}
.box {
    background-color:red;
    visibility:visible;
}

.box-wrap {
   overflow: hidden;
   height: 0;
   padding-bottom: 60%;
}
.box-wrap div {
   max-width: 100%;
}