JSFiddle - React, Tailwind, and code Playground

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%;
    display: inline-block;
    padding: 0;
    margin: 0;
}
img {
    width: 100%;
    padding 0;
    margin 0;
    border: none;
}
.column {
    width: 50%;
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: top;
}
.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;
}