JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
		<div class="table">
			<div class="l"><img src="http://lorempixel.com/300/200/people/3/" alt="" /></div>
			<div class="r"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur est aperiam optio eveniet, vitae sunt provident earum, officiis officia nostrum, praesentium libero, fugit rem facere architecto labore. Nesciunt atque eius repudiandae rerum at. Unde perferendis voluptatem obcaecati illo fuga tempora sunt nisi quidem incidunt. Porro explicabo ex officiis eveniet autem? </div>
		</div>
	</div>

CSS

.wrapper
		{
			max-width: 300px;
			overflow: hidden;
			background: blue;
		}

		.table
		{
			width: 100%;
			display: table;
		}

		.l
		{
			background: red;
			display: table-cell;
			width: 50%;
		}

		.r
		{
			background: green;
			display: table-cell;
			width: 50%;
		}

		img
		{
			max-width: 100%;
			height: auto;
            display: block;
            width: 100%;
		}