JSFiddle - React, Tailwind, and code Playground

by Ben Clayton

HTML

<div class="block">
    a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
</div>
<div class="block">
    The div not covered g g  ui jk jk jkjj kjjj  jkkj jkjkj kjjjk jkjkj jkjj kjkj iu  igu  iu g ui 
    <div id='overlay'>
    </div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
}

.block {
    xoverflow:hidden;
    position:relative;
    border: 1px solid;
    padding: 15px;
    background: red;
    font-size: 20px;
    width:200px;
    margin:20px;
}

#overlay {
    opacity: .6;
    position: absolute;
    background: white;
    padding:0px;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}

JavaScript

var p = $("#overlay").parent();

//console.log(    p.padding() );
$("#overlay").width(p.width()+10);
$("#overlay").height(p.height()+10);