JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<div class="portfolio-wrap">


  <div class="portfolio-row">


    <div class="portfolio-single-content">
      <div class="wrap">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor rutrum aliquet. Quisque ut ultricies velit. Aliquam facilisis lorem et dapibus gravida. Sed et ullamcorper libero, non lacinia sem. In venenatis fermentum purus sed aliquam. Maecenas eu venenatis justo, tincidunt egestas elit. Quisque at sapien id lorem finibus vulputate.
      </div>
    </div>
    <div class="portfolio-gallery-image">
      <img src="http://i.imgur.com/46zXZiY.jpg" alt="Test Project 8">
    </div>
  </div>

  <div class="portfolio-row">


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

  </div>
</div>

CSS

body {
  margin: 0;
}

.portfolio-wrap {
  width:100%;
  display: table;
}

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

.portfolio-single-content {
  width: 50%;
  background-color: #f00;
  display: table-cell;
  vertical-align:middle;
  text-align:;
}

.wrap { width: 80%; margin:0px auto; }

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

.portfolio-gallery-image img {
  min-width: 100%;
  min-height: 100%;
}