A Pen by Leon Paternoster.

Equal-height-columns-with-display:table.markdown

Equal height columns with display:table

Properly separated column layout, so width, padding and colouring can be separated from table cells.

Key is to apply colour classes to .g-col-x rather than .g-content

Need .g-row (or any other block element) to force a new row, although you don't need any CSS here. Could apply display: table-row to maintain table style semantics.

A Pen by Leon Paternoster on CodePen.

License.

index.html

<div class="g">

  <div class="g-row">

       <div class="g-col g-one g-reverse">

  <div class="g-content">

    <p>Hoodie Helvetica slow-carb, meditation actually dreamcatcher flannel Blue Bottle Shoreditch lomo.  Hella fap Truffaut hashtag Tonx raw denim.  Normcore church-key Schlitz tote bag Shoreditch flannel retro chia small batch.  Brunch tilde wolf cardigan.  Seitan artisan cred Pitchfork, meditation pour-over deep v fingerstache.  Vegan 90's retro roof party, keffiyeh vinyl locavore.  Neutra pickled Marfa, farm-to-table single-origin coffee XOXO lo-fi Austin flexitarian jean shorts Pitchfork hashtag.</p>

  </div> <!-- end .g-content -->

</div> <!-- end .g-col g-one -->

<div class="g-col g-two g-light">

  <div class="g-content">

    <p>Hoodie Helvetica slow-carb, meditation actually dreamcatcher flannel Blue Bottle Shoreditch lomo.  Hella fap Truffaut hashtag Tonx raw denim.  Normcore church-key Schlitz tote bag Shoreditch flannel retro chia small batch.  Brunch tilde wolf cardigan.  Seitan artisan cred Pitchfork, meditation pour-over deep v fingerstache.  Vegan 90's retro roof party, keffiyeh vinyl locavore.  Neutra pickled Marfa, farm-to-table single-origin coffee XOXO lo-fi Austin flexitarian jean shorts Pitchfork hashtag.</p><p>Trust fund irony 3 wolf moon, mumblecore four loko gastropub master cleanse Banksy pickled cred Etsy hella PBR selfies direct trade.  Cray single-origin coffee pickled, mustache YOLO normcore Intelligentsia locavore.  Pork belly artisan pug Vice, Carles Neutra typewriter biodiesel 3 wolf moon small batch literally.  Tumblr wayfarers bicycle rights mixtape, wolf actually stumptown kogi.  Kale chips mustache literally keytar.  Ethical 90's Etsy, photo booth mlkshk shabby chic 3 wolf moon trust fund salvia Brooklyn.  Biodiesel beard lomo vegan, craft beer trust fund Austin swag synth pickled.</p><p>PBR&amp;B literally tofu freegan, disrupt plaid church-key Thundercats pop-up Tonx.  Retro food truck you probably haven't heard of them McSweeney's 90's squid.  Narwhal sartorial hoodie, chambray Bushwick pop-up leggings umami forage hashtag Etsy fap flexitarian.  Tumblr biodiesel Odd Future, mixtape authentic Pinterest tousled.  Heirloom Brooklyn pork belly post-ironic fingerstache, raw denim typewriter polaroid Intelligentsia selfies bicycle rights Tonx semiotics Helvetica vinyl.  Etsy chambray flexitarian hella, kitsch selfies butcher letterpress dreamcatcher locavore meh fanny pack viral.  Vice shabby chic authentic Tumblr Godard tilde.</p><p>Craft beer beard tousled vinyl, mixtape PBR&amp;B asymmetrical meggings.  Direct trade  beard gastropub disrupt.  XOXO banh mi street art, direct trade  fashion axe cold-pressed hashtag flexitarian mumblecore locavore Intelligentsia Carles.  Fixie tote bag pop-up, chambray brunch PBR you probably haven't heard of them plaid semiotics Wes Anderson artisan banjo vinyl selvage mumblecore.  Polaroid bespoke aesthetic, cred farm-to-table gastropub taxidermy mixtape viral.  Shoreditch Williamsburg before they sold out Cosby sweater Blue Bottle.  Pour-over lomo trust fund, cornhole +1 gluten-free banh mi Echo Park mlkshk Tonx.</p>

  </div> <!-- end .g-content -->

</div> <!-- end .g-col g-two -->

</div> <!-- end g.row -->

<div class="g-row">

  <div class="g-col g-one g-yellow">

    <div class="g-content">

      <p>Hoodie Helvetica slow-carb, meditation actually dreamcatcher flannel Blue Bottle Shoreditch lomo.  Hella fap Truffaut hashtag Tonx raw denim.  Normcore church-key Schlitz tote bag Shoreditch flannel retro chia small batch.  Brunch tilde wolf cardigan.  Seitan artisan cred Pitchfork, meditation pour-over deep v fingerstache.  Vegan 90's retro roof party, keffiyeh vinyl locavore.  Neutra pickled Marfa, farm-to-table single-origin coffee XOXO lo-fi Austin flexitarian jean shorts Pitchfork hashtag.</p>

    </div> <!-- end .g-content -->

  </div> <!-- end .g-col g-one -->

  <div class="g-col g-two g-grey">

    <div class="g-content">

      <p>Hoodie Helvetica slow-carb, meditation actually dreamcatcher flannel Blue Bottle Shoreditch lomo.  Hella fap Truffaut hashtag Tonx raw denim.  Normcore church-key Schlitz tote bag Shoreditch flannel retro chia small batch.  Brunch tilde wolf cardigan.  Seitan artisan cred Pitchfork, meditation pour-over deep v fingerstache.  Vegan 90's retro roof party, keffiyeh vinyl locavore.  Neutra pickled Marfa, farm-to-table single-origin coffee XOXO lo-fi Austin flexitarian jean shorts Pitchfork hashtag.</p><p>Trust fund irony 3 wolf moon, mumblecore four loko gastropub master cleanse Banksy pickled cred Etsy hella PBR selfies direct trade.  Cray single-origin coffee pickled, mustache YOLO normcore Intelligentsia locavore.  Pork belly artisan pug Vice, Carles Neutra typewriter biodiesel 3 wolf moon small batch literally.  Tumblr wayfarers bicycle rights mixtape, wolf actually stumptown kogi.  Kale chips mustache literally keytar.  Ethical 90's Etsy, photo booth mlkshk shabby chic 3 wolf moon trust fund salvia Brooklyn.  Biodiesel beard lomo vegan, craft beer trust fund Austin swag synth pickled.</p><p>PBR&amp;B literally tofu freegan, disrupt plaid church-key Thundercats pop-up Tonx.  Retro food truck you probably haven't heard of them McSweeney's 90's squid.  Narwhal sartorial hoodie, chambray Bushwick pop-up leggings umami forage hashtag Etsy fap flexitarian.  Tumblr biodiesel Odd Future, mixtape authentic Pinterest tousled.  Heirloom Brooklyn pork belly post-ironic fingerstache, raw denim typewriter polaroid Intelligentsia selfies bicycle rights Tonx semiotics Helvetica vinyl.  Etsy chambray flexitarian hella, kitsch selfies butcher letterpress dreamcatcher locavore meh fanny pack viral.  Vice shabby chic authentic Tumblr Godard tilde.</p><p>Craft beer beard tousled vinyl, mixtape PBR&amp;B asymmetrical meggings.  Direct trade  beard gastropub disrupt.  XOXO banh mi street art, direct trade  fashion axe cold-pressed hashtag flexitarian mumblecore locavore Intelligentsia Carles.  Fixie tote bag pop-up, chambray brunch PBR you probably haven't heard of them plaid semiotics Wes Anderson artisan banjo vinyl selvage mumblecore.  Polaroid bespoke aesthetic, cred farm-to-table gastropub taxidermy mixtape viral.  Shoreditch Williamsburg before they sold out Cosby sweater Blue Bottle.  Pour-over lomo trust fund, cornhole +1 gluten-free banh mi Echo Park mlkshk Tonx.</p>

    </div> <!-- end .g-content -->

  </div> <!-- end .g-col g-two -->

</div> <!-- end g.row -->

</div> <!-- end .g -->

style.css

body {
	font-family: 'PT Serif', georgia, serif;
	line-height: 1.4;
	margin: 0;
	padding: 0;
	color: #333;
	font-size: 112.5%;
	max-width: 1020px;
	margin: 0 auto;
}

.g {
	display: table;
}

.g-col {
	display: table-cell;
}

.g-one {
	width: 32%;
}

.g-two {
	width: 68%;
}

.g-content {
	padding: 1.4em 2.8em;
}

.g-reverse {
	background-color: #333;
	color: #F1F1F1;
}

.g-light {
	background-color: #F1F1F1;
}

.g-yellow {
	background-color: #FCF4BA;
}

.g-grey {
	background-color: #CFCFCF;
}