Html 保持两个堆叠的div高度相同

我正在使用bootstrap来构建我的站点，在一个位置，我有两个div堆叠在图像右侧。只要浏览器超过767px，两个div的高度都应该是图像高度的一半，并且具有响应能力

下面是一个JSFIDLE：

服务


第一次服务
另一项服务

技术规格


一种规格
第二规格

---

下面是我尝试执行的操作的图像：

创建一个包含Service box和Tech Specs box的div容器。然后，在css中，使容器与图像的高度相同。对“服务和技术规格”框执行此操作：

height:50%;

---

您可以添加高度：255px！重要的看看这里：必须找到一个引导解决方案，它必须在那里。

height:50%;