JSFiddle - React, Tailwind, and code Playground

by elybella

HTML

<div class="two-pics"> 

		<div class="wc-pic-blue pic">
			<img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c529b09f953f29724252/1464452394022/8248798.jpg">
		</div><div class="wc-pic-pink pic">
			<img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749ca6e37013bafc39f394d/1464453743501/parade-2.jpg">
            </div>
            <br style="clear: left;" />
	</div>

CSS

.two-pics {
  width: 100%;
}


.wc-pic-blue {
  width: 40%;
  background-image: url('http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4007c65e4c37e086e54/1464452096489/_watercolor-splash-blue.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  float: left;
  padding: 4%;
}

.wc-pic-pink {
  width: 40%;
  background-image: url('http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4077c65e4c37e086e6d/1464452103387/_watercolor-splash-magenta.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  float: right;
  padding: 4%;
}