JSFiddle - React, Tailwind, and code Playground

by dipankara

HTML

<section id="row1">
    <div class="container">
        <div id="table">
            <div class="tableRow">
                <div class="tableCell imgRight">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac facilisis ante. Aenean et augue feugiat, gravida ligula quis, pharetra quam. Integer nec sodales erat. Mauris fringilla eleifend condimentum. Cras eleifend sodales nisi in tempor.</p>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="row2">
    <div class="container">
        <div id="table">
            <div class="tableRow">
                <div class="tableCell imgLeft">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac facilisis ante. Aenean et augue feugiat, gravida ligula quis, pharetra quam. Integer nec sodales erat. Mauris fringilla eleifend condimentum. Cras eleifend sodales nisi in tempor.</p>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

#row1 {
    background:#FFF;
}
#row2 {
    background:#F0F0F0;
}
section[id^=row] {
    float: left;
}
section[id^=row]:not(:last-child) {
    margin-bottom: 20px;
}
.container {
    margin: 0 auto;
    max-width: 55rem;
    width: 90%;
    padding:20px 0px;
}
#table {
    display: table;
    border-spacing: 10px 0px;
    margin: 0 auto;
}
.tableRow {
    display: table-row;
}
.tableCell {
    display: table-cell;
    width:50%;
    height: auto;
    vertical-align: middle;
}
.tableCell.imgLeft:before {
    content:' ';
    width: 200px;
    height: 200px;
    background: yellow;
    display: table-cell;
}
.tableCell.imgRight:after {
    content:' ';
    width: 200px;
    height: 200px;
    background: yellow;
    display: table-cell;
    vertical-align: middle;
}
.tableCell > p {
    display: table-cell;
    vertical-align: middle;
}
@media only screen and (max-width : 640px) {
    .tableCell {
        display: block;
        width: auto;
        height: auto;
        vertical-align: middle;
        text-align: center;
    }
    section[id^=row]:not(:last-child) {
        float: left;
        margin-bottom: 20px;
    }
    .tableCell > p {
        display: block;
    }
    .tableCell:after {
        content:' ';
        width: 200px;
        height: 200px;
        background: yellow;
        display: block !important;
        margin: 0 auto;
    }
    .tableCell:before {
        display: none !important;
    }
}