// The essential styling
.row {
  box-sizing: border-box;
  display: table;
  table-layout: fixed;
  width: 100%;
}

.cell {
  display: table-cell;
  flex: 1;
  flex-direction: column;
  position: relative;
}

@supports(display: flex) {
  .row {
    display: flex;
  }
  // display: block is needed to allow inline-block content inside a cell, if there is vertical alignment, we need display: flex
  .cell {
    display: block;
  }
  .cell-valign-middle,
  .cell-valign-bottom {
    display: flex;
  }
}

.cell-min {
  width: 1%;
  flex: none auto;
}

.cell-max {
  width: 100%;
  flex: 1 100%;
}

// Beautify this demo
body, html {
  height: 100%;
}

body {
  background: url(http://desktop.freewallpaper4.me/view/original/6507/gold-bokeh.jpg);
  background-size: cover;
  color: white;
  font-family: verdana;
  padding-top: 20px;
}

.row {
  border-collapse: seperate;
  border-spacing: 8px 0;
  padding: 4px;
}

.cell {
  border-radius: 6px;
  background: rgba(#888, 0.85);
  margin-right: 8px;
  padding: 6px;
  
  &.cell-1-5 {
    flex: none;
    width: 20%;
  }

  &.cell-nowrap {
    overflow: hidden;
    white-space: nowrap;
  }

  &.cell-valign-middle {
    vertical-align: middle;
    justify-content: center;
  }

  &.cell-valign-bottom {
    vertical-align: bottom;
    justify-content: flex-end;
  }

  &.cell-align-center {
    text-align: center;
  }

  &.cell-align-right {
    text-align: right;
  }

  &.cell-100px {
    flex: none;
    width: 100px;
    max-width: 100px;
  }
}