html - make divs equal height across row -

i have tabular table has different sized divs on same row shown below:

how can make labels same height , vertical-align: bottom?

it must easy fix - cannot see mistake have made. have tried many things, read lot of posts , spent on 3 hours trying figure out on own. stumped!

here css , html:

    .wrapper {          border-spacing: 0px 0px;          display: table;          font-family: verdana;          font-size: 12px;          width: 100%;      }            .dhtr {          display: table-row;            }            .label01 {          -webkit-box-sizing: border-box;  /* safari/chrome, other webkit */          -moz-box-sizing: border-box;  /* firefox, other gecko */          box-sizing: border-box;          direction: ltr;          display: table-cell;          float: left;          font-weight: bold;          padding: 2px;          padding-right: 10px;          text-align: left;          vertical-align: bottom;          width: calc(100% - 15% - 15% - 60px - 72px - 15%);  /* subtract lengths of 5 divs */          word-wrap: break-all;                background-color: aqua;            }            .label02 {          -webkit-box-sizing: border-box;  /* safari/chrome, other webkit */          -moz-box-sizing: border-box;  /* firefox, other gecko */          box-sizing: border-box;  /* opera/ie 8+ */          direction: ltr;          display: table-cell;          float: left;          font-weight: bold;          height: 100%;          overflow: hidden;          padding: 2px;          padding-left: 10px;          padding-right: 10px;          text-align: left;          vertical-align: bottom;          width: 15%;          word-wrap: break-all;                background-color: fuchsia;      }            .label03 {          -webkit-box-sizing: border-box;  /* safari/chrome, other webkit */          -moz-box-sizing: border-box;  /* firefox, other gecko */          box-sizing: border-box;  /* opera/ie 8+ */          direction: ltr;          display: table-cell;          float: left;          font-weight: bold;          overflow: hidden;          padding: 2px;          padding-left: 10px;          padding-right: 10px;          text-align: left;          vertical-align: bottom;          width: 15%;          word-wrap: break-all;                background-color: khaki;      }            .label04 {          -webkit-box-sizing: border-box;  /* safari/chrome, other webkit */          -moz-box-sizing: border-box;  /* firefox, other gecko */          box-sizing: border-box;  /* opera/ie 8+ */          direction: ltr;          display: table-cell;          float: left;          font-weight: bold;          overflow: hidden;          padding: 2px;          padding-left: 10px;          padding-right: 10px;          text-align: center;          vertical-align: bottom;          width: 60px;          word-wrap: break-all;                background-color: mediumpurple;      }            .label05 {          -webkit-box-sizing: border-box;  /* safari/chrome, other webkit */          -moz-box-sizing: border-box;  /* firefox, other gecko */          box-sizing: border-box;  /* opera/ie 8+ */          direction: ltr;          display: table-cell;          float: left;          font-weight: bold;          overflow: hidden;          padding: 2px;          padding-left: 10px;          padding-right: 10px;          text-align: center;          vertical-align: bottom;          width: 72px;          word-wrap: break-all;                background-color: palegreen;      }            .label06 {          -webkit-box-sizing: border-box;  /* safari/chrome, other webkit */          -moz-box-sizing: border-box;  /* firefox, other gecko */          box-sizing: border-box;  /* opera/ie 8+ */          direction: ltr;          display: table-cell;          float: left;          font-weight: bold;          overflow: hidden;          padding: 2px;          padding-left: 10px;          padding-right: 10px;          text-align: left;          vertical-align: bottom;          width: 15%;          word-wrap: break-all;                background-color: teal;      }            .dctr {          width: 100%;      }            .content01 {          -webkit-box-sizing: border-box;  /* safari/chrome, other webkit */          -moz-box-sizing: border-box;  /* firefox, other gecko */          box-sizing: border-box;  /* opera/ie 8+ */          direction: ltr;          display: table-cell;          float: left;          overflow: hidden;          padding: 2px;          padding-bottom: 10px;          padding-right: 10px;          text-align: left;          vertical-align: top;          width: calc(100% - 15% - 15% - 60px - 72px - 15%);  /* subtract lengths of 5 divs */          word-wrap: break-all;                background-color: coral;      }            .content02 {          -webkit-box-sizing: border-box;  /* safari/chrome, other webkit */          -moz-box-sizing: border-box;  /* firefox, other gecko */          box-sizing: border-box;  /* opera/ie 8+ */          direction: ltr;          display: table-cell;          float: left;          overflow: hidden;          padding: 2px;          padding-bottom: 10px;          padding-left: 10px;          padding-right: 10px;          text-align: left;          vertical-align: top;          width: 15%;          word-wrap: break-all;                background-color: gold;      }            .content3 {          -webkit-box-sizing: border-box;  /* safari/chrome, other webkit */          -moz-box-sizing: border-box;  /* firefox, other gecko */          box-sizing: border-box;  /* opera/ie 8+ */          direction: ltr;          display: table-cell;          float: left;          overflow: hidden;          padding: 2px;          padding-bottom: 10px;          padding-left: 10px;          padding-right: 10px;          text-align: left;          vertical-align: top;          width: 15%;          word-wrap: break-all;                background-color: lime;      }            .content04 {          -webkit-box-sizing: border-box;  /* safari/chrome, other webkit */          -moz-box-sizing: border-box;  /* firefox, other gecko */          box-sizing: border-box;  /* opera/ie 8+ */          direction: ltr;          display: table-cell;          float: left;          overflow: hidden;          padding: 2px;          padding-bottom: 10px;          padding-left: 10px;          padding-right: 10px;          text-align: center;          vertical-align: bottom;          width: 60px;          word-wrap: break-all;                background-color: orange;      }            .content05 {          -webkit-box-sizing: border-box;  /* safari/chrome, other webkit */          -moz-box-sizing: border-box;  /* firefox, other gecko */          box-sizing: border-box;  /* opera/ie 8+ */          direction: ltr;          display: table-cell;          float: left;          overflow: hidden;          padding: 2px;          padding-bottom: 10px;          padding-left: 10px;          padding-right: 10px;          text-align: center;          vertical-align: bottom;          width: 72px;          word-wrap: break-all;                background-color: red;      }            .content06 {          -webkit-box-sizing: border-box;  /* safari/chrome, other webkit */          -moz-box-sizing: border-box;  /* firefox, other gecko */          box-sizing: border-box;  /* opera/ie 8+ */          direction: ltr;          display: table-cell;          float: left;          overflow: hidden;          padding: 2px;          padding-bottom: 10px;          padding-left: 10px;          padding-right: 10px;          text-align: left;          vertical-align: bottom;          width: 15%;          word-wrap: break-all;                background-color: wheat;      }

 <div class="wrapper">          <div class="dhtr">              <div class="label01">license</div>              <div class="label02">license type</div>              <div class="label03">issuing authority</div>              <div class="label04">years held</div>              <div class="label05">expiry</div>              <div class="label06">restrictions</div>          </div>          <div class="dctr">              <div class="content01" >my licence details description</div>              <div class="content02">car - manual</div>              <div class="content03">my issuing authority</div>              <div class="content04">12</div>              <div class="content05">01/2017</div>              <div class="content06">none</div>          </div>      </div>

@amit correct on floats. don't need use when you're using display: table-cell;

i took time clean css, driving me nuts ;)

<div class="wrapper"> <div class="dhtr">     <div class="label01">license</div>     <div class="label02">license type</div>     <div class="label03">issuing authority</div>     <div class="label04">years held</div>     <div class="label05">expiry</div>     <div class="label06">restrictions</div> </div> <div class="dctr">     <div class="content01">my licence details description</div>     <div class="content02">car - manual</div>     <div class="content03">my issuing authority</div>     <div class="content04">12</div>     <div class="content05">01/2017</div>     <div class="content06">none</div> </div> </div>  * {     -webkit-box-sizing: border-box;             -moz-box-sizing: border-box;            box-sizing: border-box; } .wrapper {     border-spacing: 0px 0px;     display: table;     font-family: verdana;     font-size: 12px;     width: 100%; } .dhtr, .dctr {     display: table-row; } .dhtr > div, .dctr > div {     direction: ltr;     display: table-cell;     font-weight: bold;     text-align: left;     vertical-align: bottom;     overflow: hidden;     word-wrap: break-all; } .label01 {     padding: 2px;     padding-right: 10px;     width: calc(100% - 15% - 15% - 60px - 72px - 15%);     /* subtract lengths of 5 divs */     background-color: aqua; } .label02 {     height: 100%;     padding: 2px 10px 10px 2px;     width: 15%;     background-color: fuchsia; } .label03 {     padding: 2px 10px 10px 2px;     width: 15%;     word-wrap: break-all;     background-color: khaki; } .label04 {     padding: 2px 10px 10px 2px;     text-align: center;     width: 60px;     background-color: mediumpurple; } .label05 {     padding: 2px 10px 10px 2px;     text-align: center;     width: 72px;     background-color: palegreen; } .label06 {     padding: 2px 10px 10px 2px;     width: 15%;     background-color: teal; } .dctr {     width: 100%; } .content01 {     padding: 2px 10px 10px 2px;     vertical-align: top;     width: calc(100% - 15% - 15% - 60px - 72px - 15%);     /* subtract lengths of 5 divs */     background-color: coral; } .content02 {     padding: 2px 10px 10px;     vertical-align: top;     width: 15%;     background-color: gold; } .content3 {     padding: 2px 10px 10px;     vertical-align: top;     width: 15%;     background-color: lime; } .content04 {     padding: 2px 10px 10px;     width: 60px;     background-color: orange; } .content05 {     padding: 2px 10px 10px;     text-align: center;     width: 72px;     background-color: red; } .content06 {     padding: 2px 10px 10px;     width: 15%;     background-color: wheat; }