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

<p>Fiddle: <a href="https://jsfiddle.net/DTcHh/18560/" rel="noreferrer">https://jsfiddle.net/DTcHh/18560/</a></p>

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

<hr>

<pre><code>@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 &gt; div { display: table-cell; vertical-align: middle; border: 1px solid #000; }
</code></pre>