Boxes with table, table-cell... display

extra-box.less

/* extra homepage */

.extra-img {
  z-index: 0;
  position: relative;
  //display: table;
  width: 100%;
  //min-height: 20rem;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.extra-img-bg {
  box-sizing: border-box;
  //border: 1px solid rgba(255, 255, 255, 0.3);
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  .extraOverlay(fadeout(@black, 39%));
}

.extra-box {
  //position: absolute;
  display: table;
  border-collapse: collapse;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  text-align: left;
  .extra-box-left {
    display: table-cell;
    vertical-align: top;
    color: @white;
    padding: @midPad;
    //border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  }
  .thead {
    display: table-header-group;
    background-color: @white;
    span {
      color: @blue;
    }
  }
  .tfoot {
    color: @white;
    display: table-footer-group;
    hr {
      background-color: fadeout(@white, 61%);
      margin-top: .61rem;
      margin-bottom: .61rem;
    }
    p {
      span {
        display: block;
        float: right;
      }
    }
  }
}