Question

i want to put line separator in html div like this : a Black line Z shape “mirror image” as you see below , i tried to set last left side div and first right side div border but i am not able think that how could i draw vertical line, with very smart way to use CSS

i tried this :-

<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>

example is here : jsfiddle

Answer 1

Use two dis to wrap the left and right columns

And here is the css for your requirement

 #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
}

UPDATED DEMO