JSFiddle - React, Tailwind, and code Playground

by valerio

HTML

<div class="container">
    <div class="column blue">
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Tiling_Regular_4-4_Square.svg/320px-Tiling_Regular_4-4_Square.svg.png">
    </div>
    <div class="column yellow">
        <div class="row green">Upper half</div>
        <div class="row red">Lower half</div>
    </div>
</div>

CSS

body {
    margin 0;
    padding 0;
}
.container {
    width: 100%;
    overflow:auto;
    padding: 0;
    margin: 0;
    background:yellow;
}
img {
    width: 100%;
    padding 0;
    margin 0;
    border: none;
    vertical-align:bottom;
}
.column {
    width: 50%;
    padding: 0;
    margin: 0;
    float:left;
}
.row {
    width: 100%;
    height: 50%;
    padding: 0;
    margin: 0;
    vertical-align: top;
    display: inline-block;
}
.red {
    background-color: red;
}
.green {
    background-color: green;
}
.blue {
    background-color: blue;
}
.yellow {
    background-color: yellow;
}

JavaScript

(function myFunction() {

    var imgHeight = $("img").outerHeight(true);
    jQuery('.column').css('height', (imgHeight) + "px");
    $(window).resize(function () {
        myFunction();
    });
})();