JSFiddle - React, Tailwind, and code Playground

by Josh Weir

HTML

<div style="position: relative;">this is here</div>
<div id="container" class="clearfix">
    <div id="textlayer">original text
        <br>asdfasdf
        <br>asdfasdfasdfasdf
        <br>asdfdfsdfsdf</div>
    <div id="text">Test Text
        <br>asdfasdf
        <br>asdfasdfasdfasdf
        <br>asdfdfsdfsdf</div>
</div>
<div>This is another unrelated div, shouldnt break this flow</div>

CSS

.clearfix:after{content: ""; display: block; clear: both; height: 0; visibility: hidden;}
.clearfix{min-height: 0; height: 1%;}

#container {
    position: relative;
    border-color: red;
    border: solid;
    border-width: 1px;
    background-color: yellow;
}
#textlayer {
    float: left;
    width:auto;
    height:auto;
    background-color:white;
    filter:alpha(opacity=70);
    opacity:0.8;
    position:absolute;
    /*
    left:250;
    top:150;
    */
    display:none;
    overflow:hidden;
    border-color: black;
    border: solid;
    border-width: 2px;
}
#text {
    float: left;
    display:none;
    position: absolute;
    background-color:white;
    padding-top:100px;
    border-color: black;
    border: solid;
    border-width: 2px;
}

JavaScript

$('#textlayer').fadeIn('slow', function () {
            $('#text').animate({
                'opacity': 'show',
                    'paddingTop': 0
            }, 2000);
        });

var objHeight = 0;
     $.each($('#container').children(), function(){
            objHeight += $(this).height();
     });
     $('#container').height(objHeight);