Make Bootstrap 3列具有相同的高度，可见的装订线和背景颜色

Question

我想将Bootstrap 3列设为：

• 具有相同的高度（编辑：等于最高列，可能会改变）
• 有明显的排水沟将它们隔开
• 的背景颜色与其等高相匹配

到目前为止，我能够使它们具有相同的高度（没有可见的排水沟）或给它们一个排水沟和背景。在过去的两个小时里，我一直在摆弄这个，但无济于事。当然，我已经阅读了所有我能找到但却无法解决这个谜语的内容。非常感谢您的帮助！

这是我的问题的代码和代码。

HTML

<div class="container">
  <div class="flex-row row">
    <div class="col-sm-5">
      <div class="inner">
        <p>Some text and probably an image over here. Not as much as on the other side, but still..</p>
      </div>
    </div>
    <div class="col-sm-7">
      <div class="inner">
        <p>More content on this side. How can I make the two columns have the same height and have a gutter in between?</p>
        <img src="...">
      </div>
    </div>
  </div>
</div>

CSS

div[class^='col-sm-'],
div[class*=' col-sm-'] {
  background-color: green;
}

@media only screen and (min-width : 768px) {
   .flex-row.row {
     display: flex;
     flex-wrap: wrap;
   }
   .flex-row.row > [class*='col-'] {
     display: flex;
     flex-direction: column;
   }
  .flex-row.row:after, 
  .flex-row.row:before {
     display: flex;
  }
}

http://codepen.io/anon/pen/QEozAj

我不希望列具有固定高度，因为内容会发生变化。 理想情况下，我希望尽可能少的额外div。 ：）

编辑：由于有用的回复，列高度现在看起来不错。仍然需要明显的排水沟。