How to make Bootstrap columns act like table cells

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; }