JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<div class="portfolio-wrap">
<div class="portfolio-row"> 
<div class="portfolio-single-content">
  <p>Text Here</p>
</div>
<div class="portfolio-gallery-image">
  <img src="http://i.imgur.com/KsABwma.jpg" alt="Test Project 8">
</div>
</div>

<div class="portfolio-row"> 
<div class="portfolio-gallery-image">
  <img src="http://i.imgur.com/KsABwma.jpg" alt="Test Project 8">
</div>
<div class="portfolio-gallery-image">
  <img src="http://i.imgur.com/FA6KV0T.jpg" alt="Test Project 8">
</div>
</div>

</div>

CSS

body {
  margin: 0;
}

.portfolio-wrap { display:table; }

.portfolio-row { display: table-row; }

.portfolio-single-content {
  display:table-cell;
  width: 50%;
  height: auto;
  background: red;
  float:left;
}

.portfolio-gallery-image {
  width: 50%;
  display:table-cell;
  float:left;
}

.portfolio-gallery-image img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
  display:block;
}