JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic</a></li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic2</a></li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic3</a></li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic4</a></li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic5</a></li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic6</a></li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic7</a></li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic8</a></li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic9</a></li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic10</a></li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic11</a></li>
</ol>

CSS

ol {
  padding: 0px;
  list-style: decimal-leading-zero inside;
  color: #000;
  font-size: 0.9em;
  -moz-column-count: 5;
  -webkit-column-count: 5;
  column-count: 5;
  border:solid;
}
ol li {
  display:inline-block;
  margin: 5px 10px;
  transition:0.5s
}
ol li a {
  background-color: #EEE;
  display: block;
  width: 200px;
  height: 40px;
  cursor: pointer;
  text-overflow:ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
}
li:hover ~ li:last-child {
  margin-top:-10px ;/* minus the growth of the one hovered to keep count even */
  display:block;
  }
li:last-child {
  background:
    linear-gradient(
      to bottom left,
      transparent 49%,
      gray 49%,
      gray 51%,
      transparent 51%),
    linear-gradient(
      to bottom right,
      transparent 49%,
      gray 49%,
      gray 51%,
      transparent 51%
    );
}

JavaScript

$('a.song').each(function() {
      var origwidth = $(this).width();
      var origheight = $(this).height();
      $(this).hover(
        function() {
          $(this).stop().animate({width: origwidth * 2, height: origheight * 2});
        }, function() {
          $(this).stop().animate({width: origwidth, height: origheight});
      });
        $(this).clone(true).attr({"class":"song-detail"}).css({"z-index": 1, "background-color":"#CCC"}).appendTo('ol').wrap("<li></li>");
    });

var col = 5; // number of columns
var liH =50; // average height ol li, including margins
var nbli = $('ol li').length; // how many do we have ?
var olH = nbli*liH; // total height of ol
var colnbli = Math.ceil(nbli/col); // how many li would it make if each column is fully filled ?
var colH = colnbli*liH; // what's average height of each col 
var ceilOlH= colH*col; //what's total height of columns together
var olH = nbli*liH; // what's real height of ol ?
var fixLiH = ceilOlH - olH; // how much difference do i have ?
var fixcol  =  $('<li style="height:'+fixLiH+'px;width:50%;padding:0; "></li>').appendTo('ol'); // let's see if we can fill the remaining gap