Vertically align content in side by side divs

Question

I have two divs, side by side, where one (right) has more content that the other (left). I've been trying to have the right one, vertical align so it's centered in the middle of the left one.

Here is the CodePen: https://codepen.io/anon/pen/OjyZNP?editors=1100

Trying to achieve something like this on desktop:

.vertical-align {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.bg-overlay {
  /*background: linear-gradient( rgba(140,113,94, .9), rgba(140,113,94, .1));*/
  background: linear-gradient(rgba(20, 20, 20, .7), rgba(20, 20, 20, .7));
  position: relative;
  display: table;
}

.owl-bg {
  background: url('https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg');
  position: relative;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  color: white;
}

.owl-ttl {
  display: inline-block;
  height: 100%;
}

.owl-ttl-text {
  position: relative;
  z-index: 100;
  color: white;
  display: initial;
  overflow: auto;
  min-height: inherit;
}

.owl-content-text {
  position: relative;
  z-index: 100;
  color: white;
  display: initial;
  overflow: auto;
  min-height: inherit;
  padding: 4vh;
  font-weight: 200;
  padding-left: 6vw;
}

.owl-bg:after {
  clear: both;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="owl-bg col-md-12 col-xs-12">
  <div class="row vertical-align ">
    <div class="bg-overlay col-md-12 col-xs-12">
      <div class="col-md-12 col-xs-12 text-center">
        <div class="pecan-text">
          <div class="col-md-5 col-xs-12 owl-ttl">
            <span class="font-light owl-ttl-text">OWL</span><br/>
            <span class="font-light owl-subt-text"><i>(Carya illinoinensis)</i></span><br/><br/>
          </div>

          <div class="col-md-6 col-xs-12 text-justify owl-content-text">
            <p>
              Owls are birds from the order Strigiformes, which includes about 200 species of mostly solitary and nocturnal birds of prey typified by an upright stance, a large, broad head, binocular vision, binaural hearing, sharp talons, and feathers adapted for
              silent flight. Exceptions include the diurnal northern hawk- owl and the gregarious burrowing owl.
              <br /> Owls hunt mostly small mammals, insects, and other birds, although a few species specialize in hunting fish. They are found in all regions of the Earth except Antarctica and some remote islands.
              <br /> Owls are divided into two families: the Strigidae family of true (or typical) owls; and the Tytonidae family of barn-owls.
            </p>
            <div style="clear:both"></div>
          </div>

          <div class="col-md-1 col-md-4 col-xs-12"></div>
        </div>
      </div>
    </div>
  </div>

Answer 1

Add display: flex and align-items: center for your .pecan-text. Demo:

.pecan-text {
  display: flex; /* new */
  align-items: center; /* new */
}

.vertical-align {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.bg-overlay {
  /*background: linear-gradient( rgba(140,113,94, .9), rgba(140,113,94, .1));*/
  background: linear-gradient(rgba(20, 20, 20, .7), rgba(20, 20, 20, .7));
  position: relative;
  display: table;
}

.owl-bg {
  background: url('https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg');
  position: relative;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  color: white;
}

.owl-ttl {
  display: inline-block;
  height: 100%;
}

.owl-ttl-text {
  position: relative;
  z-index: 100;
  color: white;
  display: initial;
  overflow: auto;
  min-height: inherit;
}

.owl-content-text {
  position: relative;
  z-index: 100;
  color: white;
  display: initial;
  overflow: auto;
  min-height: inherit;
  padding: 4vh;
  font-weight: 200;
  padding-left: 6vw;
}

.owl-bg:after {
  clear: both;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="owl-bg col-md-12 col-xs-12">
  <div class="row vertical-align ">
    <div class="bg-overlay col-md-12 col-xs-12">
      <div class="col-md-12 col-xs-12 text-center">
        <div class="pecan-text">
          <div class="col-md-5 col-xs-12 owl-ttl">
            <span class="font-light owl-ttl-text">OWL</span><br/>
            <span class="font-light owl-subt-text"><i>(Carya illinoinensis)</i></span><br/><br/>
          </div>

          <div class="col-md-6 col-xs-12 text-justify owl-content-text">
            <p>
              Owls are birds from the order Strigiformes, which includes about 200 species of mostly solitary and nocturnal birds of prey typified by an upright stance, a large, broad head, binocular vision, binaural hearing, sharp talons, and feathers adapted for
              silent flight. Exceptions include the diurnal northern hawk- owl and the gregarious burrowing owl.
              <br /> Owls hunt mostly small mammals, insects, and other birds, although a few species specialize in hunting fish. They are found in all regions of the Earth except Antarctica and some remote islands.
              <br /> Owls are divided into two families: the Strigidae family of true (or typical) owls; and the Tytonidae family of barn-owls.
            </p>
            <div style="clear:both"></div>
          </div>

          <div class="col-md-1 col-md-4 col-xs-12"></div>
        </div>
      </div>
    </div>
  </div>