Flexbox 50％宽度的列和相等的高度

Question

我正在使用Bootstrap 4，并且我希望一行具有50％的宽度列，并且两列的高度相同。

.row {
  align-items:center;
}
  .row > div {
    flex:1 0 50%;
  }
img {
  max-width:100%;
}
.copy {
  background-color:#ccc;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row d-flex flex-row">
    <div class="image">
      <img src="http://placehold.it/555x555" />
    </div>
    <div class="copy">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed congue justo. Nam imperdiet nibh mi, sit amet consectetur leo varius et. Nunc eleifend magna at eleifend vestibulum.</p>
    </div>
  </div>
</div>

当前，副本容器仅使用与其内部p标签所创建的高度相同的高度。如何使它与图像使用相同的高度，以便背景颜色与图像匹配？