How to make Bootstrap columns act like table cells

Question

I'm trying to make my bootstrap columns act like tds, or find some other way for them to have equal height and vertically centered text. I've tried doing the display:table-cell hack but to no success. What am I doing wrong below?

Fiddle: https://jsfiddle.net/DTcHh/18560/

<div class="row like-table-row">
  <div class="col-xs-8 col-sm-10 col-md-10 col-lg-10">
      <p>
         Here's some text that will surely be long enough to go onto another line if I make it thiiiiiiiiiiiiiiiiiiiiiiiiiisssssssssssssssssssssssss long
      </p>
  </div>
  <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
       <p>
           Here's some shorter text
       </p>
  </div>
  <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
       <p>
           Blah     
       </p>
  </div>
</div>
<div class="row like-table-row">
  <div class="col-xs-8 col-sm-10 col-md-10 col-lg-10">
      <p>
         Here's some text
      </p>
  </div>
  <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
       <p>
           Here's some shorter text
       </p>
  </div>
  <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
       <p>
           Blah     
       </p>
  </div>
</div>

---

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.row.like-table-row { display: table-row; }
  .row.like-table.row > div { display: table-cell; vertical-align: middle; border: 1px solid #000; }

Answer 1

You're doing everything right except removing the float. If you don't remove the float, it breaks the table layout.

.row.like-table-row {
    display: table-row;
}

.row.like-table-row > div {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid #000;
    float:none;
}

This should work just fine.

P.S. I used to use this technique a lot, but have stopped ever since the advent of Flexbox.

Answer 2

Correct method is to use .row as table and .col-* as table-cell.

.like-table {
    display: table;
    width: 100%;
}

.like-table > [class*=col-] {
    display: table-cell;
    vertical-align: middle;
    float: none;
}

I have updated your fiddle to working demo. https://jsfiddle.net/rhythm19/DTcHh/33195/