用背景图像强制空div以覆盖容器div的高度

Question

我有两列的行。我希望包含带有背景图像的.product-image空div的列（在右侧）与包含带文本的.product-text div的列（在左侧）具有相同的高度。背景图像应覆盖右列的整个区域。

我在这里创建了一个codepen：http://codepen.io/anon/pen/VemgQb

HTML：

<div class="container-fluid subpage-product">
  <div class="row">
    <div class="col-lg-6 col-md-6 col-xs-12 product-text">
      <div class="product-icon">
        <img src="https://s-media-cache-ak0.pinimg.com/736x/5a/dc/89/5adc89f4a0752dfec5c2f9ba625bfac5.jpg">
      </div>
      <h2>Meow Meow Meow</h2>
      <p>Pelt around the house and up and down stairs chasing phantoms shove bum in owner's face like camera lens stare at ceiling.</p>
    </div>
    <div class="col-lg-6 col-md-6 col-xs-12 no-padding product-img" id="horse-racing-bg-img-01">
  </div>
</div>

CSS（LESS）：

  #horse-racing-bg-img-01 {
    background: url(http://i.imgur.com/C9xULnI.jpg) no-repeat;
    background-size: cover;
  }

  .subpage-product .row {
    overflow: hidden;
    .product-text {
      padding: 70px 100px;
      text-align:center;
      background-color: #000;
      color: #fff;
    }
    .product-img {
      height: 100%;
    }
    .product-icon {
      height: 80px;
      width: 80px;
      display: block;
      margin: 0 auto 0;
      border-radius: 50%;
      border: 1px solid white;
      background-color: #fff;
      img {
        height: 50px;
        width: 50px;
        margin: 15px 15px 0 13px;
      }
    }
  }