I'm rendering data into a div and I want to see if I can use CSS to create three lines between the four columns. I'm using a single div in order to get the data to display properly. While it would be nice if I was using separate columns (then I'd do `border-right: 2px solid black` to each col), I like how the div expands as more items are added so I want to stick with a single div.

I've included a [screencap](https://i.stack.imgur.com/bQfh4.png) that should better explain what I'm trying to achieve.

HTML snippet:
-------------

```
<div class="all-training">

    <h2>All Training Courses</h2>

    <div class="row">
        <div class="col">
          <ul class="all-courses-ul"></ul> 
        </div>
    </div>

</div>

```

### CSS snippet:

```
.all-courses-ul {
    display: block;
}

.all-courses-ul li {
    display: inline-block;
    font-size: 15px;
    list-style-type: none;
    padding-bottom: 30px;
    text-align: left;
    width: 25%;
}

```

### JS snippet:

```
import testjson from './test.json';

    function loadAllCourses() {
        let jsonRes = testjson.d.results.map(function(val) {
            return {
                "Title": val.Title
            }
        });

        let allTitles = jsonRes;
        for (var i = 0; i < allTitles.length; i++) {
            $(".all-courses-ul").append("<li>" + allTitles[i].Title + "</li>")
        };

    } // ------------------ loadAllCourses

    loadAllCourses();

```