找到交叉点的会议点和位置内容，javascript

Question

我需要找出2个div相遇的位置，并将内容跨越两个div。我永远不会知道我的div有多大，因为这个数字因情况而异。

第一个img显示我需要的东西，第二个显示我的问题，而只有2列。

所以我正在寻找一种使用javascript的方法来找出我的列有多宽，找到div相遇的点，并将内容定位在交叉点的中心位置。我希望你明白我的意思。

我尝试用css做，但收效甚微。 所以这还没有js。任何香草或jquery解决方案都会很棒。

我需要什么：

我有什么：

#wrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

#wrapper div {
  display: table-cell;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.overlap {
  background: #010101;
  padding: 5px 10px;
  min-width: 100px;
  color: white;
  position: relative;
  top: 0;
  right: -50%;
  z-index: 2;
  text-align: center;
}

<div id="wrapper">
  <div>
    <p>one
      <span class="overlap">phase</span>
    </p>
  </div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
</div>