JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div class="row">
    <div class="span-4"></div>
    <div class="span-8">
        <div class="expandable">
            here I want to change the height of this div according to the width size.
        </div>
        <div class="dummy"></div>
    </div>
</div>

CSS

html,body{
    width:100%;
    margin:0;
    padding:0;
}

.span-8 {
    position: relative;
}
.dummy {
    padding-top: 75%;
}
.expandable {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background:gold;
}