CSS li columns with border-bottom bug?

Question

I have an unordered list with a column-count: 2; style applied to <ul>, and border-bottom: solid 1px #ccc; on the <li> items.

.artist-dates ul {
  list-style: none;
  list-style-type: none;
  column-count: 2;
  margin: 0;
}

.tour-date-item {
  line-height: 28px;
  border-bottom: 1px #ccc solid;
  padding: 5px 0;
  margin: 0;
}

<ul class="tour-dates">
  <li class="tour-date-item">
    <div class="tour-date-date">07/19/2017</div>
    <div class="tour-date-city-state">Nashville, TN</div>
    <div class="tour-date-venue">Ryman Auditorium</div>
    <a class="tour-ticket-btn" href="">Tickets</a>
  </li>
  <li class="tour-date-item">
    <div class="tour-date-date">07/22/2017</div>
    <div class="tour-date-city-state">London, UK</div>
    <div class="tour-date-venue">O2 Arena</div>
    <a class="tour-ticket-btn" href="">Tickets</a>
  </li>
  <li class="tour-date-item">
    <div class="tour-date-date">08/21/2017</div>
    <div class="tour-date-city-state">Los Angeles, CA</div>
    <div class="tour-date-venue">House of Blues</div>
    <a class="tour-ticket-btn" href="">Tickets</a>
  </li>
  <li class="tour-date-item">
    <div class="tour-date-date">08/27/2017</div>
    <div class="tour-date-city-state">Nashville, TN</div>
    <div class="tour-date-venue">Bluebird Cafe</div>
    <a class="tour-ticket-btn" href="">Tickets</a>
  </li>
  <li class="tour-date-item">
    <div class="tour-date-date">12/04/2017</div>
    <div class="tour-date-city-state">Austin, TX</div>
    <div class="tour-date-venue">SXSW</div>
    <a class="tour-ticket-btn" href="">Tickets</a>
  </li>
</ul>

On the front end the border on the last <li> in the first column pushes to the top of the next column. Like this:

So parts with only one <li> item look like this:

Any idea how to fix this? Thanks!

Answer 1

Prevent breaks inside the .tour-date-item by using:

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */

Example:

.tour-dates {
  list-style: none;
  list-style-type: none;
  -wekbit-column-count: 2;
  column-count: 2;
  margin: 0;
}

.tour-date-item {
  line-height: 28px;
  border-bottom: 1px #ccc solid;
  padding: 5px 0;
  margin: 0;
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari, Opera */
  page-break-inside: avoid;
  /* Firefox */
  break-inside: avoid;
  /* IE 10+ */
}

<ul class="tour-dates">
  <li class="tour-date-item">
    <div class="tour-date-date">07/19/2017</div>
    <div class="tour-date-city-state">Nashville, TN</div>
    <div class="tour-date-venue">Ryman Auditorium</div>
    <a class="tour-ticket-btn" href="">Tickets</a>
  </li>
  <li class="tour-date-item">
    <div class="tour-date-date">07/22/2017</div>
    <div class="tour-date-city-state">London, UK</div>
    <div class="tour-date-venue">O2 Arena</div>
    <a class="tour-ticket-btn" href="">Tickets</a>
  </li>
  <li class="tour-date-item">
    <div class="tour-date-date">08/21/2017</div>
    <div class="tour-date-city-state">Los Angeles, CA</div>
    <div class="tour-date-venue">House of Blues</div>
    <a class="tour-ticket-btn" href="">Tickets</a>
  </li>
  <li class="tour-date-item">
    <div class="tour-date-date">08/27/2017</div>
    <div class="tour-date-city-state">Nashville, TN</div>
    <div class="tour-date-venue">Bluebird Cafe</div>
    <a class="tour-ticket-btn" href="">Tickets</a>
  </li>
  <li class="tour-date-item">
    <div class="tour-date-date">12/04/2017</div>
    <div class="tour-date-city-state">Austin, TX</div>
    <div class="tour-date-venue">SXSW</div>
    <a class="tour-ticket-btn" href="">Tickets</a>
  </li>
</ul>
CSS