JSFiddle - React, Tailwind, and code Playground

by Varun Krishna P

HTML

<div class="p1" style="display: none;">
    <div class="child">Child 1</div>
    Parent 1
</div>
<div class="p2">
    <div class="child">Child 2</div>
    Parent 2
</div>

CSS

html, body {height: 100%}

.p1 {
    width: 50%;
    height: 100%;
    float: left;
    background-color: cyan;
}

.p2 {
    width: 100%
    min-height: 100%;
   /*  float: left; */
    background-color: green;
    /* position: relative; */    
}

.child {
    /* width: 50%; */
    height: 100%;
    background-color: yellow;
    float: right;
}

.p2 .child {
    position: absolute;
    top: 20px;
    /*bottom:0
    right: 0; */
    width: 100%;
}

JavaScript

// answer from this post 
//http://stackoverflow.com/questions/8425959/child-div-not-expanding-to-parent-div