JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="parent2">
    <div id="parent">
        
        <div id="child2"></div>
        <div id="child1"></div>
        
        <div id="child3">
            2131 22131 2313 2131 2313 2131 2313 2131 2313 2131 2313 313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 22131 2313 2131 2313 2131 2313 2131 2313 2131 2313 313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 22131 2313 2131 2313 2131 2313 2131 2313 2131 2313 313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131 2313 2131...

CSS

#parent2 {
    float: left;
    position: relative;
    overflow: hidden;
    margin: 20px;
}

#parent {
    position: relative;
    width: 400px;
    height: 300px;
    border: 1px solid #e1e1e1;
    overflow-x: hidden;
    overflow-y: auto;
}

#child1,
#child2 {
    position: absolute;
    top: 40px;
    left: 0px;
    width: 140px;
    height: 100%;
    background: #222222;
    z-index:3;
}

#child3 { width: 140px; position: relative; z-index: 5; }

#child1 {
    top: 0px;
    height: 40px;
    background: red;
    opacity: 0.4;
}

div { color: white; }


.red {
    background: red;
}

JavaScript

var showme = $('#child1');
var overlay = $('#child2');
var caption = $('#child3');


overlay.css({ height: caption.height() - showme.height() });