JSFiddle - React, Tailwind, and code Playground

by taylorbuley

HTML

<div id="outer">
<div id="parade-reynolds-outer-container">
    <div id="parade-reynolds-inner-container">
    <div id="parade-reynolds-left-pane">
        <div id="parade-reynolds-clock-container">
            <img src="http://pagead2.googlesyndication.com/pagead/imgad?id=CICAgKCNn834HRABGAEyCMRmUdS8Wdu7" id="parade-reynolds-clock-image"><div id="parade-reynolds-clock-text-container">
            <div id="parade-reynolds-clock-text-top"><span>Save</span></div>
            <div id="parade-reynolds-clock-text-middle"><span>30</span></div>
            <div id="parade-reynolds-clock-text-bottom"><span>Minutes</span></div>
        </div>
            </div>    </div>
    <div id="parade-reynolds-right-pane">
        <div id="parade-reynolds-header">
            <div id="parade-reynolds-header-inner-container">
            <div id="parade-reynolds-logo-container">
                <div id="parade-reynolds-logo-inner-container">
                <div id="parade-reynolds-logo-text"><span>BROUGHT TO YOU BY</span></div>
                <img src="http://pagead2.googlesyndication.com/pagead/imgad?id=CICAgKCNn43nqAEQARgBMgiGLcDeJ4PpbQ" id="parade-reynolds-logo-image">
            </div>
                </div>
            <div id="parade-reynolds-button-container">
                <div id="parade-reynolds-button"><span>Meal Magic Time Saver</span></div>
            </div>
            </div>
        </div>
        <div id="parade-reynolds-content-container">
            <div id="parade-reynolds-content">
                <span>Make hardened brown sugar usable again by wrapping it in aluminum foil and placing it in a 300- degree oven for 5 minutes. Caution: Hot to the touch. Measure immediately before it cools.</span>
            </div>
        </div>
    </div>
    </div>
        <br style="clear:both">
</div>
    </div>

CSS

#outer{min-width: 320px}
#parade-reynolds-outer-container {
  font: normal 14px/18px "proxima-nova", Helvetica, Arial, sans-serif;
  border: 1px solid #eee;
  padding: 10px;
  position: relative;
  margin: 10px 0;
}
#parade-reynolds-inner-container {
  position: relative;
}
#parade-reynolds-left-pane {
  width: 20%;
  left: 0;
  top: 0;
  bottom: 0;
  position: relative;
  float: left;
}
#parade-reynolds-clock-container {
font-size: 15px;
 line-height: 20px;
 font-weight: lighter;
text-align: center;
position: absolute;
top: 0px;
bottom: 0px;
left: 0;
right: 0;
}
#parade-reynolds-clock-text-container {
  width: 40px;
  position: absolute;
  top: 0px;
  margin: 25px auto;
  width: 95px;
  color: #fff;
}
#parade-reynolds-clock-text-middle {
  font-size: 28px;
}
#parade-reynolds-clock-image {
 height: 110px;
position: absolute;
left: 0;
bottom: 0;
top: -5px;
}
#parade-reynolds-right-pane {
  width: 80%;
  right: 0;
  bottom: 0;
  top: 0;
  position: relative;
  float: right;
}
#parade-reynolds-header {
  width: 100%;
  position: relative;
}
#parade-reynolds-header-inner-container {
  position: relative;
}
#parade-reynolds-logo-container{
  width: 60%;
  position: absolute;
  height: 100%;
}
#parade-reynolds-logo-inner-container{
    position: relative;
    float:left;
}
#parade-reynolds-logo-text {
  font-size: 10px;
  color: #cacaca;
  position: relative;
    float:left;
    padding: 5px 5px 5px 0;
}
#parade-reynolds-logo-image {
    position: relative;
    width: 100px;
    top: 0px;
    right: 0
    float: left;
}
#parade-reynolds-button-container {
  width: 40%;
  position: absolute;
  right: 0;
  top: 0;
}
#parade-reynolds-button {
  text-align: center;
  font-size: 13px;
  padding: 5px 9px;
  background-color: #004891;
  color: #fff;
}
#parade-reynolds-button span {

}
#parade-reynolds-content-container {
  position: absolute;
  bottom: 0;
}
#parade-reynolds-content{
  margin-top: 10px;
}

JavaScript

var inner_height = $('#parade-reynolds-button-container').height() + $('#parade-reynolds-content-container').height();
                    $('#parade-reynolds-inner-container').css('height',inner_height );
$('#parade-reynolds-clock-image').css('height',$('#parade-reynolds-outer-container').height());

$( window ).resize(function() {
inner_height = $('#parade-reynolds-button-container').height() + $('#parade-reynolds-content-container').height();
                    $('#parade-reynolds-inner-container').css('height',inner_height );
//$('#parade-reynolds-clock-image').css('height',$('#parade-reynolds-outer-container').height());
});
$( window ).on( "orientationchange", function( event ){
    inner_height = $('#parade-reynolds-button-container').height() + $('#parade-reynolds-content-container').height();
                    $('#parade-reynolds-inner-container').css('height',inner_height );
});