JSFiddle - React, Tailwind, and code Playground

by mrbinky3000

HTML

<article class="table">
  <div class="row">
    <section class="col">
        <div class="pad">
            <h1>Row 1, Cell 1</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla,
                sapien ut ultricies hendrerit, odio mi laoreet lorem, vitae ullamcorper
                nisi justo ac mauris. Quisque interdum lorem eros, eu ultricies enim.
                Quisque iaculis diam ornare eros dictum tincidunt. Sed felis libero,
                pellentesque malesuada porta sed, egestas et ipsum.</p>
        </div>
    </section>
    <section class="col" id="test">
        <div class="bottom-please">
            <div>Show me at the bottom!</div>
        </div>
        <div class="pad">
            <h1>Row 1, Cell 2</h1>
        </div>
    </section>
  </div>
  <div class="row">
    <section class="col">
        <div class="pad">
            <h1>Row 2, Cell 1</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis
                urna ligula. Phasellus feugiat blandit sem. Aenean condimentum bibendum
                est, ac pharetra elit luctus nec. Sed placerat mi purus. Suspendisse at
                dolor vitae erat ornare viverra. Donec augue libero, consequat eget
                aliquam sit amet, laoreet non tellus. Pellentesque at elit vitae mi
                porta varius.</p>
        </div>
    </section >
    <section class="col">
        <div class="pad">            
            <h1>Row 2, Cell 1</h1>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada
                fames ac turpis egestas. Cras a est nec ante laoreet pharetra quis
                ut odio. Aenean vitae neque erat, vehicula mattis nulla. Vestibulum
                a sem id leo laoreet ornare. </p>
        </div>
    </section>
  </div>
</article>

SCSS

/* page layout using css tables  */
.table {
    display: table;
    background-color: #f5f5f5;
    border-top: 1px solid #dedede;
    border-left: 1px solid #dedede;
}

.row {
    display: table-row;
}

.col {
    display: table-cell;
    width: 50%;
    border-right: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
}


/* Just for looks, add a padding to all the cells.  We are using a pad div to make ie 7,8 happy */
.pad {
    padding: 1em;
}


/* This is the main test.  Setting position:relative to a div with display:table-cell or to a td works in every web browser EXCEPT every version of Firefox as of 10/23/2012.   Every other browser will place the yellow box at the bottom of the cell.   Firefox places the yellow box at the bottom of the first parent element that isn't using table-cell, table-row, or table for their display. */

#test {
    position: relative;
    zoom: 1;
    background-color: white;
    
    /* .ffpad is only used by our javascript shim */
    .ffpad {
        position: relative;            
    }
    
    .bottom-please {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        
        background-color: yellow;
        > div {
            line-height: 2em;
            height: 2em;
            padding: 1em;        
            color: red;
        }       
    }
}


/* This is just an example of a responsive view for mobile. We are removing the table layout and moving every div back to their default setting of display:block */
@media screen and (max-width: 480px) {
    .table, .row, .col {
        display: block;        
    }

    .col {
        width: auto;
    }

    #test {
        height: 160px;

        /* .ffpad is only used by our javascript shim */
        .ffpad {
            /* by removing position relative and setting it to static, the absolute positioning of ".bottom-please" is contained by .ffpad's parent, #test, which has positioning set to relative already */           
          ...

JavaScript

$(function() {
    // FireFox Shim
    // FireFox is the *only* browser that doesn't support position:relative for
    // block elements with display set to "table-cell." Use javascript to add
    // an inner div to that block and set the width and height via script.
    if ($.browser.mozilla) {

        // wrap the insides of the "table cell"            
        $('#test').wrapInner('<div class="ffpad"></div>');

        function ffpad() {
            var $ffpad = $('.ffpad'),
                $parent = $('.ffpad').parent(),
                w, h;
            
            // remove any height that we gave ffpad so the browser can adjust size naturally.
            $ffpad.height(0);
            
            // Only do stuff if the immediate parent has a display of "table-cell".  We do this to
            // play nicely with responsive design.
            if ($parent.css('display') == 'table-cell') {               
                
                // include any padding, border, margin of the parent
                h = $parent.outerHeight();
                
                // set the height of our ffpad div
                $ffpad.height(h);
                
            }

        }


        // be nice to fluid / responsive designs   
        $(window).on('resize', function() {
            ffpad();
        });

        // called only on first page load
        ffpad();

    }

});