JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="clear"><a href='javascript:window.location.reload()' >REFRESH</a> FOR RANDOM CONTENT</div>
<div class="items">
  <div class="entry-content-main">Main</div>
  <div class="entry-content-rest">Post 1</div>
  <div class="entry-content-rest">Post 2</div>
  <div class="entry-content-rest">Post 3</div>
  <div class="entry-content-rest">Post 4</div>
  <div class="entry-content-rest">Post 5</div>
  <div class="entry-content-rest">Post 6</div>
</div>
<br />
<br />
<div class="items">
  <div class="entry-content-main">Main Post</div>
  <div class="entry-content-rest">Post 1</div>
  <div class="entry-content-rest">Post 2</div>
  <div class="entry-content-rest">Post 3</div>
  <div class="entry-content-rest">Post 4</div>
  <div class="entry-content-rest">Post 5</div>
  <div class="entry-content-rest">Post 6</div>
  <div class="entry-content-rest">Post 7</div>
</div>
<div class="clear">DEMO FOR THIS <a target="_blank" href="http://wordpress.stackexchange.com/questions/98915/first-post-full-width-rest-in-two-columns">QUESTION</a></div>

CSS

body {
	  font-family: Arial, Helvetica, sans-serif;
	  background: snow;
	  color: dimgrey;
	}
  a,a:link,a:visited{
    color:lightcoral;
  }
  a:hover{
    color:tomato;
  }
	
	.items {
	  position: relative;
	  display: block;
	  clear: both;
	  width: 100%;
	}
	
	.items [class^="entry-content-"] .copy {
	  padding: 15px;
	}
	
	.items [class^="entry-content-"] {
	  background: gainsboro;
	  position: relative;
	  min-height: 50px;
	  word-wrap: break-word;
	  display: inline-block;
	  overflow: hidden;
	  margin-bottom: 5px;
	  width: 48.5%;
	  float: left;
	}
	
	.items [class^="entry-content-"]:first-of-type {
	  background: skyblue;
	  color: snow;
	  width: 100%;
	  clear: both;
	}
	
	.items [class^="entry-content-"]:nth-child(even) {
	  clear: both;
	}
	
	.items [class^="entry-content-"]:nth-child(odd) {
	  float: right;
	  clear: right;
	}
	
	.clear {
	  clear: both;
	}

JavaScript

function range(min, max) {
  var range = max - min;
  return Math.floor(Math.random() * range) + min;
}

var things = ("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat.").split(' ');

function getWords(count) {
  var stuff = [];
  while (count && count > 0) {
    var thing = things[Math.floor(Math.random() * things.length)];
    stuff.push(thing);
    count--;
  }
  return stuff.join(' ');
}

var $ = $ || jQuery;
$(document).ready(function() {
  $('.items [class^="entry-content-"]').each(function(inx, item) {
    var $item = $(item),
      words = getWords(range(5, 200));
    $item.html('<div class="copy">POST - ' + inx + " - " + words + '</div>');
  });

  $('.items [class^="entry-content-"]:first-of-type').each(function(inx, item) {
    var $item = $(item),
      words = getWords(range(5, 20));
    $item.html('<h1 class="copy">MAIN POST - ' + inx + " - " + words + '</h1>');
  });
});