Add vertical 1px line between two columns

Your best bet would be to add a div inside the first column, like this:

[column grid="2" span="1"]<div class="right-border">Your content in here</div>[/column]

Then you can add this CSS and adjust the border color:

@media (min-width: 769px) {
      .right-border {
            border-right: 1px solid #DDD;
      }
}

That would work, however, the border is not in between the two columns but a right border of the first, so it looks misaligned. Any way to push it further right?

See http://www.activeito.com/blog/computer-services-2/

I found code that should work, but I can't seem to implement it.. Maybe you can help.

http://philhoyt.com/2014/09/19/pure-css-vertical-divider/

http://martinsdevblog.blogspot.com/2013/06/flexible-css-column-separators-done.html

My initial code should work if you add this:

body .column-grid .column {
      margin-right: 0;
      padding-right: 5%;
}