How to add a vertical line in a table row that has white space between top and bottom borders

Question

As I said in the Title I want to add a vertical line in a table exactly like this :

screenshot

how I can add an white space to my vertical line like that.

my border-collapse is separate also.

jsFiddle

html :

<table>
  <tbody>
    <tr>
      <td class="no-vl"></td>
      <td class="vl"></td>
    </tr>
  </tbody>
</table>

css :

table {
  border-collapse: separate;
  border-spacing: 0 5px;
}

td {
  width: 200px;
  border: 1px solid black;
  padding: 20px;
}

.vl {
  border-left: 6px solid green;
  height: 50px;
  left: 50px;
}

.no-vl {
  border-right: none;
}

Answer 1

I'm not sure if this is what you wanted. You could use the after pseudo element of the td and achieve the desired effect

td{
  padding:10px;
  border-style: solid;
  border-color: grey;
  border-width: 1px 0; 
}

table{
border-collapse: collapse;
}

td:after{
  content: '';
  border-right: 2px solid grey;
  padding:5px;
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
</table>

Answer 2

You can add a vertical rule with the column-rule property:

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

p {
  width: 90%;
  text-align: justify;
  column-count: 2;
  column-rule: 3px solid darkgrey;
  column-gap: 30px;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, error eligendi quibusdam placeat veniam? Doloremque quis id eveniet, nemo fugiat veritatis aspernatur consequuntur perspiciatis animi, aperiam asperiores dolorem adipisci ad labore quos aliquid
  voluptatibus vero alias natus, deserunt beatae. Repellat minus dolorem architecto provident alias perferendis nihil voluptatum odit ipsum, deleniti iusto, mollitia, atque aut, omnis enim maxime accusantium. Non, maxime. Odit culpa, sint explicabo dignissimos
  eum corporis.
</p>