在div中垂直对齐文本

Question

我想在第二栏中垂直放置文本。我已经尝试了所有通常的建议：my-auto，align-items-center等，但是我似乎无法正确解决问题。

有人能指出我正确的方向吗？

<div class="row justify-content-center">
        <div class="col-1" style="background-color: #cfdc27">
        </div>
        <div class="col-10 d-flex">
          <div class="my-auto">
            <h4>Title goes here</h4>
            <p class="text-muted">Subtitle goes here.</p>
          </div>
        </div>
      </div>

https://codepen.io/anon/pen/dExRQJ