如何使两个不同的div宽度相同，在不同的屏幕尺寸

Question

我有两个Div，类名.div1＆amp; .div2宽度：20％;每。在.div1里面我有另一个div名称.bar

此.bar div位于100％绝对位置。我试图使.bar div的终点和.div2的终点应该保持在不同屏幕的同一点，如下图所示：

你可以看到Green Bar（.bar）和Gay Div（.div2）的终点在线。但是，如果我增加或减少屏幕的大小，他们就不会保持一致。我已经绑定了许多方法，但没有奏效。这只能用CSS吗？或者需要任何jQuery帮助？如果需要任何jQuery，任何人都可以帮助我如何做到这一点？因为我对jQuery并不擅长。

这是HTML：

    <div class="div1">
      <div class="bar"></div>
    </div>
    <div class="div2">

    </div>

这是我用过的CSS：

.div1{
background:red;
}
.div2{
     background:#ccc;
     margin-top:25px !important;
}
.div1,.div2{
    position:relative;
    width:20%;
    float:left;
    margin:0px 10px;
    height:180px;
}
.bar{
    background:green;
    position:absolute;
    height:20px;
    left:100%;
    top:0px;
    width:114%;
    z-index:10;

}

提前致谢。 FIDDLE