Q:

Bootstrap - make content in first col vertically align relatively to second col

I'm trying to vertically align content inside column relatively to it's inline column, which is higher.
It's pretty hard for me to explain in words, so:
Here's the HTML structure.
<div class="row">

    <div class="col-sm-7">
        <div class="i-need-to-be-in-the-middle">
            <!--some content-->
        </div>
    </div>

    <div class="col-sm-5">
        <div class="btns">
            <button>
                 first btn
            </button>
            <button>
                second btn
            </button>
            <button>
              third btn
            </button>
      </div><!--btns-->
   </div>

</div><!--.row-->

Here's how it looks like:

Here's the desire result:

I've tried a lot of solutions, but the only solutions which work for me made a mess with boostrap because they involved absolute or flexing elements.
I've also notice that the height of the first col is relative to the content length, which is less then the height of the button. 

A:

What is required is to make the columns the same height and then align the content in the center of each column
Flexbox Method 

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
.row {
  display: flex;
}
.column {
  display: flex;
  flex-direction: column;
  border: 1px solid grey;
  justify-content: center;
}
button {
  margin: 1em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">

    <div class="col-sm-7 column">
      <div class="i-need-to-be-in-the-middle">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate molestias soluta deserunt eligendi eius totam nisi fuga, esse sit voluptas praesentium, tempore laudantium placeat aperiam?
      </div>
    </div>

    <div class="col-sm-5 column">
      <div class="btns column">
        <button>
          first btn
        </button>
        <button>
          second btn
        </button>
        <button>
          third btn
        </button>
      </div>
      <!--btns-->
    </div>

  </div>
  <!--.row-->
</div>

Codepen Demo
CSS Tables Method

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
.table {
  display: table;
}
.column {
  float: none;
  /* remove bootstrap default */
  display: table-cell;
  vertical-align: middle;
  border: 1px solid grey;
  justify-content: center;
}
button {
  display: block;
  margin: .5em auto;
  width: 95%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row table">

    <div class="col-sm-7 column">
      <div class="i-need-to-be-in-the-middle">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate molestias soluta deserunt eligendi eius totam nisi fuga, esse sit voluptas praesentium, tempore laudantium placeat aperiam?
      </div>
    </div>

    <div class="col-sm-5 column">
      <div class="btns">
        <button>
          first btn
        </button>
        <button>
          second btn
        </button>
        <button>
          third btn
        </button>
      </div>
      <!--btns-->
    </div>

  </div>
  <!--.row-->
</div>

Codepen Demo

