JSFiddle - React, Tailwind, and code Playground

by Stefan Froehlich

HTML

<section id="contact-pics">
    <div class="table_cell">
        <img class="img-responsive" src="http://placehold.it/1650x1022" />
    </div>
    <div class="table_cell small">
        <div id="parent">
            <div id="top"></div>
            <div id="bottom"></div>
        </div>
    </div>
</section>

CSS

#contact-pics {
    display: table;
    width: 100%;
    height: 100%;
}
.img-responsive {
    width: 100%;
}
.table_cell {
    display: table-cell;
    vertical-align: top;
}
.table_cell:first-child {
    width: 66.666666%;
    padding-right: 14px;
}
.table_cell:nth-child(2) {
    width: 33.333333%;
    padding-left: 14px;
}
#parent {
    width: 100%;
    height: 100%;
}
#top {
    height: calc(50% - 10px);
    width: 100%;
    background: green;
}
#bottom {
    height: calc(50% - 10px);
    width: 100%;
    background: yellow;
    margin-top: 20px;
}