vertical align inside divs contained in a div that represents a row

Question

I've tried just about every vertical-align for div trick I can find and still not getting the results. This is inside of an established responsive framework, so I've stripped it down to some inline CSS to show the issue.

<div class="row uniform">
  <div style="clear:none;width:25%;float:left;background:#CCC;box-sizing:border-box;">
    box 1<br />
    line 2
  </div>
  <div style="clear:none;width:25%;float:left;background:#a43c69;color:#FFF;box-sizing:border-box;">
    box 2
  </div>
  <div style="clear:none;width:25%;float:left;background:#CCC;box-sizing:border-box;">
    box 3
  </div>
  <div style="clear:none;width:25%;float:left;background:#a43c69;color:#FFF;box-sizing:border-box;">
    box 4
  </div>
</div> 

Ideally boxes 2,3 and 4 go to the same height as box 1, and text in all boxes is vertically aligned in the middle.

row.uniform sets some margins, padding and a default vertical-align of baseline, but that's not effecting anything here.

Answer 1

Note that I removed your float: left; on all div.

.row {
  display: table;
  width: 100%;
}
.row div {
  display: table-cell;
  float: none;
  vertical-align: top;
}

<div class="row uniform">
  <div style="clear:none;width:25%;background:#CCC;box-sizing:border-box;">
    box 1<br />
    line 2
  </div>
  <div style="clear:none;width:25%;background:#a43c69;color:#FFF;box-sizing:border-box;">
    box 2
  </div>
  <div style="clear:none;width:25%;background:#CCC;box-sizing:border-box;">
    box 3
  </div>
  <div style="clear:none;width:25%;background:#a43c69;color:#FFF;box-sizing:border-box;">
    box 4
  </div>
</div>

For those wondering about browser support, it is supported on all major browsers.