index.html

<div class="Grid Grid--gutters Grid--flexCells u-textCenter">
    <div class="Grid-cell u-1of3">
      <div class="Demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore rem a atque similique dolores sint, inventore iure, expedita culpa tempora sunt, tenetur explicabo perferendis deleniti, dolor eligendi. Ipsum, nisi, sint.
      <div class="bottom">dude</div>
      </div>
    </div><div class="Grid-cell">
      <div class="Demo">
        <div class="Grid Grid--gutters u-textCenter">
          
          <div class="Grid-cell">
            <div class="Demo">
              <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, vel inventore maiores, sequi velit, rerum facere ipsum placeat rem nihil ab corrupti sit. Error quasi, quidem cum suscipit voluptates. Expedita!</div>
              <div class="Grid Grid--gutters u-textCenter">
                <div class="Grid-cell">
                  <div class="Demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus autem dolore laboriosam blanditiis earum commodi, cum, iusto asperiores eligendi debitis laborum voluptates eveniet quae ipsam voluptas fugiat quidem! Voluptates, numquam.
                    <div class="bottom">dude</div>
                  </div>
                </div>
                <div class="Grid-cell">
                  <div class="Demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non est ipsum labore similique sapiente nisi architecto ex culpa accusamus, natus, sequi aspernatur incidunt in numquam placeat vitae, fugiat nihil facilis.
                    <div class="bottom">dude</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>

style.css

.Grid {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 300px;
}

.Grid-cell {
  flex: 1;
  background: red;
  border-left: 1px solid blue
}

/* With gutters */
.Grid--gutters {
  margin-left: -1em;
}
.Grid--gutters > .Grid-cell {
  padding-left: 1em;
}

/* Alignment per row */
.Grid--top {
  align-items: flex-start;
}
.Grid--bottom {
  align-items: flex-end;
}
.Grid--center {
  align-items: center;
}

/* Alignment per cell */
.Grid-cell--top {
  align-self: flex-start;
}
.Grid-cell--bottom {
  align-self: flex-end;
}
.Grid-cell--center {
  align-self: center;
}

.u-1of3, .u-2of3 {
-webkit-box-flex: 0!important;
-webkit-flex: none!important;
-ms-flex: none!important;
flex: none!important;
}
.u-1of3 {
width: 33.3333%!important;
}

.Demo .Grid .Grid-cell:first-child {
  border-left: 0 none;
}

.Grid-cell {
  position: relative;
}

.Demo .bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 40px;
  width: 100%;
  background: yellow;
  text-align: center;
}

VYjGoP.markdown

VYjGoP

A Pen by Jason Melgoza on CodePen.

License.