JSFiddle - React, Tailwind, and code Playground

by sulfureous

HTML

<div class="row">
  <div class="column1">
    <img src="http://oxford.beta.st/wp-content/uploads/2013/07/chainsmokers-200x300.jpg" alt="Alt Text"/>
  </div>
  <div class="column2">
    <h4>THE CHAINSMOKERS @ RUMOR BOSTON – JULY 27</h4>
    <p>Ferri reque integre mea ut, eu eos vide errem noluisse. Putent laoreet et ius. Vel utroque dissentias ut, nam ad soleat alterum maluisset, cu est copiosae intellegat inciderint. Nam ei eirmod consequuntur, quod nostrum consectetuer usu ut. Vim veniam singulis senserit an, sumo consul mentitum duo ea. Copiosae antiopam ius ea, meis explicari reformidans vix cu.</p>
  </div>
</div>

<div class="row">
  <div class="column1">
    <img src="http://oxford.beta.st/wp-content/uploads/2013/07/chainsmokers-200x300.jpg" alt="Alt Text"/>
  </div>
  <div class="column2">
    <h4>THE CHAINSMOKERS @ RUMOR BOSTON – JULY 27</h4>
    <p>Ferri reque integre mea ut, eu eos vide errem noluisse. Putent laoreet et ius. Vel utroque dissentias ut, nam ad soleat alterum maluisset, cu est copiosae intellegat inciderint. Nam ei eirmod consequuntur, quod nostrum consectetuer usu ut. Vim veniam singulis senserit an, sumo consul mentitum duo ea. Copiosae antiopam ius ea, meis explicari reformidans vix cu.</p>
  </div>
</div>

<div class="row">
  <div class="column1">
    <img src="http://oxford.beta.st/wp-content/uploads/2013/07/chainsmokers-200x300.jpg" alt="Alt Text"/>
  </div>
  <div class="column2">
    <h4>THE CHAINSMOKERS @ RUMOR BOSTON – JULY 27</h4>
    <p>Ferri reque integre mea ut, eu eos vide errem noluisse. Putent laoreet et ius. Vel utroque dissentias ut, nam ad soleat alterum maluisset, cu est copiosae intellegat inciderint. Nam ei eirmod consequuntur, quod nostrum consectetuer usu ut. Vim veniam singulis senserit an, sumo consul mentitum duo ea. Copiosae antiopam ius ea, meis explicari reformidans vix cu.</p>
  </div>
</div>

<div class="row">
  <div class="column1">
    <img...

CSS

/* Use your own Clearfix here, this was for a quick fiddle - Basic CSS */

.row {
  clear: both;
  overflow: hidden;
}
.column1 {
  float: right;
  width: 20%;
}
.column1 img {
  max-width: 100%;
}
.column2 {
  float: left;
  width: 80%;
}

/* The :nth-child selecting */

.row:nth-child(odd) .column1 {
  float: left;
}
.row:nth-child(odd) .column2 {
  float: right;
}