JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>
<div class="containerLeft">
                <h2>1.</h2>
                <p>First, let's play a video.</p>
            </div>
            <div class="containerRight"><img src="http://tctechcrunch2011.files.wordpress.com/2012/09/michael-headshot-red.jpg?w=288" /></div>
</div>

CSS

.container {
    overflow: hidden;
    position: relative;
}
.container:before,.container:after {
    position: absolute;
    z-index: -1;
    top: 0; bottom: 0;
    content: '';
}
.container:before {
    left: 0;
    width: 42%;
    background: crimson;
}
.container:after {
    right: 0;
    width: 58%;
    background: dodgerblue;
}
.containerLeft, .containerRight {
    float: left;
}

.containerLeft {
    z-index: 2;
    width:38%;
    padding: 2%;
}

.containerRight {
    width: 58%;
}