html - 2 列 div 中的行分隔符

Question

我想像这样在 html div 中放置行分隔符：如下所示的黑线 Z 形“镜像”，我尝试设置最后一个左侧 div 和第一个右侧 div 边框，但我无法想到我怎么能绘制垂直线，以非常聪明的方式使用 CSS

我试过这个：-

<div id="wrap">
        <div>
            <div class="left_col">Industry:</div>
            <div class="right_col" style="border-Top: 1px solid black">Insurance</div>
        </div>
        <div >
            <div class="left_col" >Co. Size:</div>
            <div class="right_col">201 - 500 Employees</div>
        </div>
        <div >
            <div class="left_col">Working Hours:</div>
            <div class="right_col">Regular hours, Mondays-Fridays</div>
        </div>
        <div >
            <div class="left_col">Benefits:</div>
            <div class="right_col">Medical, Education support, Loans, Dental</div>
        </div>
        <div >
            <div class="left_col" style="border-bottom: 1px solid black">Spoken Language:</div>
            <div class="right_col">English</div>
        </div>
    </div>

示例在这里：jsfiddle

Answer 1

用两个dis包裹左右两列

这是满足您要求的CSS

 #wrap{margin:10px;}
.left{
   width:50%; display:table-cell;
    border-bottom: 1px solid black; 
    border-right: 1px solid black; 
    padding:15px
}
.right{
    display:table-cell;
    border-top: 1px solid black; 
    vertical-align:top;  width:50%;
    padding:15px
}

更新的演示