两个div之间的分隔线

我正在尝试在div /列之间实现分隔线，如下图所示。我已经尝试过使用带有padding和margin的边框，但是这些都不起作用。我想知道实现这一目标的最佳方法是什么？

小提琴：

http://jsfiddle.net/Lr5d096n/1/

html

<div class="container-col">
    <div></div>
<div class="column-center">
    <div class="top-div">
        <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img>
     </div>
    <div class="bottom-div">
        <h5>headline</h5>
                <div class="game-table">
        <div class="game-item">
            <div class="game-home">home Team</div>
            <div class="game-vs">Vs.</div>
            <div class="game-away">away team</div>
        </div>
        </div>
        Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...
    </div>

</div>
<div class="column-left">
        <div class="top-div">
        <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img>
    </div>
    <div class="bottom-div">
        <h5>headline</h5>
                <div class="game-table">
        <div class="game-item">
            <div class="game-home">home Team</div>
            <div class="game-vs">Vs.</div>
            <div class="game-away">away team</div>
        </div>
        </div>
        Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...
    </div>
    </div>
<div class="column-right">

        <div class="top-div">
        <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img>
    </div>
    <div class="bottom-div">
        <h5>headline</h5>
        <div class="game-table">
        <div class="game-item">
            <div class="game-home">home Team</div>
            <div class="game-vs">Vs.</div>
            <div class="game-away">away team</div>
        </div>
        </div>
        Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...
    </div>
    </div>
</div>

的CSS

.container-col {高度：自动; 显示：表；底边距：20px；}

.column-left{ float: left; width: 33.333%;  height: auto; padding-bottom: 20px; }
.column-right{ float: right; width: 33.333%; height: auto; padding-bottom: 20px; }
.column-center{ display: inline-block; width: 33.333%;  height: auto; padding-bottom: 20px; }

.top-div {

    height: auto;
}

.bottom-div {
  line-height: 18px;
    height:auto;
}

.bottom-div h5 {
    margin-top: 0px;
    margin-bottom: 10px;
    text-align: center;

}

.top-div img {
    width:100%;
    height: auto;
}

.game-table {
border-top: 1px dotted #aaa;
margin-bottom: 10px;
}


.game-item {
    padding: 8px 0px;
    border-bottom: 1px dotted #aaa;
    height: auto;

}

.game-home {
 float: left;
    width: 44%;
    margin-right: 2%;
    text-align: right;
}

.game-vs {
    width: 8%;
    margin-right: 2%;
     display: inline-block;
    text-align: center;

}

.game-away {
    float: right;
   width: 44%;
    text-align: left;

}