title: line separator with in 2 columns div
body: <p>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, <strong>with very smart way to use CSS</strong></p>
  
  <p><img src="https://i.stack.imgur.com/9OfjN.png" alt="enter image description here"></p>
  
  <p>i tried this :-</p>
  
  <pre><code>&lt;div id="wrap"&gt;
          &lt;div&gt;
              &lt;div class="left_col"&gt;Industry:&lt;/div&gt;
              &lt;div class="right_col" style="border-Top: 1px solid black"&gt;Insurance&lt;/div&gt;
          &lt;/div&gt;
          &lt;div &gt;
              &lt;div class="left_col" &gt;Co. Size:&lt;/div&gt;
              &lt;div class="right_col"&gt;201 - 500 Employees&lt;/div&gt;
          &lt;/div&gt;
          &lt;div &gt;
              &lt;div class="left_col"&gt;Working Hours:&lt;/div&gt;
              &lt;div class="right_col"&gt;Regular hours, Mondays-Fridays&lt;/div&gt;
          &lt;/div&gt;
          &lt;div &gt;
              &lt;div class="left_col"&gt;Benefits:&lt;/div&gt;
              &lt;div class="right_col"&gt;Medical, Education support, Loans, Dental&lt;/div&gt;
          &lt;/div&gt;
          &lt;div &gt;
              &lt;div class="left_col" style="border-bottom: 1px solid black"&gt;Spoken Language:&lt;/div&gt;
              &lt;div class="right_col"&gt;English&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>example</strong> is here : <a href="http://jsfiddle.net/B6ypc/" rel="nofollow noreferrer">jsfiddle</a></p>