JSFiddle - React, Tailwind, and code Playground

by Ana Guajardo

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div id="wrapper" class="row text-center">
    <div class="col-xs-12">
      <h2 class="margin-bottom-md">This is a header</h2>
    </div>
    <div class="col-sm-6 text-center margin-bottom-md">
      <div class="tile">
        <img class="img-responsive center-block margin-bottom-sm" src="http://placehold.it/500x300">
        <h3>Header One</h3>
        <div class="copy margin-bottom-md">Maecenas lobortis justo feugiat, lobortis magna ut, vestibulum odio. Morbi tincidunt ex in arcu convallis, vel vehicula leo congue. Integer ac est in erat dictum tincidunt id ut massa. Phasellus at eleifend magna. Suspendisse consectetur lorem
          augue, eget mattis sapien finibus eu.</div>

        <div class="buttons row">
          <div class="col-sm-10 col-sm-offset-1">
            <a class="btn btn-primary col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-0" href="#" rel="nofollow" target="_self">Button #1</a>
            <a class="btn btn-primary col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-0" href="#" rel="nofollow" target="_self">Button #2</a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 text-center margin-bottom-md">
      <div class="tile">
        <img class="img-responsive center-block margin-bottom-sm" src="http://placehold.it/500x300/111">
        <h3>Header Two</h3>
        <div class="copy margin-bottom-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur augue sit amet orci dignissim vehicula. Mauris dui neque, pulvinar quis blandit quis, pulvinar eu nunc.</div>

        <div class="buttons row">
          <div class="col-sm-10 col-sm-offset-1">
            <a class="btn btn-primary col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-0" href="#" rel="nofollow" target="_self">Button...

CSS

#wrapper {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.tile {
  border: 1px solid #000;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column;
  flex-flow: column;
}

.copy {
  height: 100%;
  border: 1px solid #00f;
}

.buttons {
  height: 100%;
  border: 1px solid #f00;
}