title: Is it possible to draw lines within this div?
body: <p>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 <code>border-right: 2px solid black</code> to each col), I like how the div expands as more items are added so I want to stick with a single div.</p>
  
  <p>I've included a <a href="https://i.stack.imgur.com/bQfh4.png" rel="nofollow noreferrer">screencap</a> that should better explain what I'm trying to achieve.</p>
  
  <h2>HTML snippet:</h2>
  
  <pre><code>&lt;div class="all-training"&gt;
  
      &lt;h2&gt;All Training Courses&lt;/h2&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col"&gt;
            &lt;ul class="all-courses-ul"&gt;&lt;/ul&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <h3>CSS snippet:</h3>
  
  <pre><code>.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%;
  }
  </code></pre>
  
  <h3>JS snippet:</h3>
  
  <pre><code>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 &lt; allTitles.length; i++) {
              $(".all-courses-ul").append("&lt;li&gt;" + allTitles[i].Title + "&lt;/li&gt;")
          };
  
      } // ------------------ loadAllCourses
  
      loadAllCourses();
  </code></pre>