How to place a CSS-grid child after the row of another child?

I am trying to replicate a UI interaction found in Apple's iTunes software: album covers are shown in a grid as selectable squares, clicking on one of which reveals a full-width tracklist box under the currently selected album. Here is a screenshot that demonstrates that UI.

I have a the main HTML/CSS/JS setup needed in the snippet below: a parent grid, some clickable items (albums), and a full-width item (tracklist) at the very bottom. However, the dynamic placement of the tracklist is missing.

This is the needed behaviour: whenever an album is clicked, the tracklist should be placed after the last album in the row that was clicked. This would effectively show the tracklist right under whatever album is clicked.

Is there a reliable way to do this?

Note: placing the tracklist at "index = clicked album index + 1" isn't the correct result, as the tracklist pushes the remaining albums in that row out.

const parent = document.getElementById("grid-parent");

for (let i = 0; i < 10; i++) {
  const album = document.createElement("button");
  album.classList.add("album");
  parent.appendChild(album);
  album.addEventListener("click", (event) => {
    /* Move the tracklist div element after 
     * the last element of the row that the 
     * clicked album element is in. 
     * How can we do that? */
  });
}

const tracklist = document.createElement("div");
tracklist.classList.add("tracklist");
parent.appendChild(tracklist);

#grid-parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, 10rem);
  grid-gap: 1rem;
  justify-content: space-between;
}

.album {
  width: 10rem;
  height: 10rem;
  background-color: aqua;
}

.album:before {
  content: "Album cover";
}

.tracklist {
  grid-column: 1 / -1;
  background-color: darkseagreen;
  height: 15rem;
}

.tracklist:before{
  content: "Tracks here";
}

<div id="grid-parent"/>

Solution

The solution to this is simpler than you think. The key concept is that each of your grid items needs to contain both the album cover and the tracklist. The tracklists need to be inside the grid, not outside. Let’s structure our document like this:

[grid]
  [grid-item]
    [cover]
    [tracklist]
  [grid-item]
    [cover]
    [tracklist]
  ...

And then our rendered page will look like this:

Here is a snippet which implements the above. After running this snippet, make sure you use the full page link to see the effect properly.

body {
  margin: 1.5em;
  font-family: sans-serif;
  font-size: 12px;
}

.d1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  grid-gap: 1.5em;
}

.d1 img {
  display: block;
  width: 100%;
}

.d1 .tracklist {
  margin-top: 1.5em;
  padding: 1em;
  background: darkseagreen;
}

<div class="d1">
  <div>
    <img src="https://donald.au/bugs/so-78583658/michaeljackson_thriller.jpg">
    <div class="tracklist">
      Wanna Be Startin’ Somethin’<br>
      Baby Be Mine<br>
      The Girl Is Mine<br>
      Thriller<br>
      Beat It<br>
      Billie Jean<br>
      Human Nature<br>
      P.Y.T. (Pretty Young Thing)<br>
      The Lady in My Life<br>
    </div>
  </div>
  <div>
    <img src="https://donald.au/bugs/so-78583658/acdc_backinblack.jpg">
    <div class="tracklist">
      Hells Bells<br>
      Shoot To Thrill<br>
      What Do You Do for Money Honey<br>
      Give the Dog a Bone<br>
      Let Me Put My Love into You<br>
      Back in Black<br>
      You Shook Me All Night Long<br>
      Have a Drink on Me<br>
      Shake a Leg<br>
      Rock and Roll Ain’t Noise Pollution<br>
    </div>
  </div>
  <div>
    <img src="https://donald.au/bugs/so-78583658/whitneyhouston_thebodyguard.jpg">
    <div class="tracklist">
      I Will Always Love You<br>
      I Have Nothing<br>
      I’m Every Woman<br>
      Run To You<br>
      Queen Of The Night<br>
      Jesus Loves Me<br>
      Even If My Heart Would Break<br>
      Someday (I’m Coming Back)<br>
      It’s Gonna Be a Lovely Day<br>
      (What’s So Funny ’Bout) Peace, Love, and Understanding<br>
      Waiting For You<br>
      Trust in Me<br>
      Theme from <em>The Bodyguard</em><br>
    </div>
  </div>
  <div>
    <img src="https://donald.au/bugs/so-78583658/pinkfloyd_thedarksideofthemoon.jpg">
    <div class="tracklist">
      Speak to Me<br>
      Breathe (In the Air)<br>
      On the Run<br>
      Time<br>
      The Great Gig in the Sky<br>
      Money<br>
      Us and Them<br>
      Any Colour You Like<br>
      Brain Damage<br>
      Eclipse<br>
    </div>
  </div>
  <div>
    <img src="https://picsum.photos/id/299/300">
    <div class="tracklist">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/301/300">
    <div class="tracklist">Cras volutpat velit non mi sagittis condimentum. Cras tempor aliquet turpis sed pretium. Nunc aliquet sodales turpis quis ultrices.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/302/300">
    <div class="tracklist">Nulla rhoncus aliquam mauris, eu pretium dolor auctor in. Maecenas a sollicitudin dolor, eget commodo quam. Proin et dui sed ligula vulputate egestas.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/304/300">
    <div class="tracklist">Curabitur eget ullamcorper justo, sit amet dictum neque. Fusce vitae ligula et felis auctor vulputate vel suscipit nibh.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/305/300">
    <div class="tracklist">Sed sed cursus leo. Nam molestie eleifend leo, nec fermentum risus maximus ac. Pellentesque eget placerat ipsum. Vestibulum tempor quam justo.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/306/300">
    <div class="tracklist">Mauris vulputate quam ac purus laoreet, nec ultrices eros placerat. Fusce id nisi ex. Nunc ornare tellus nisl, suscipit fermentum quam sodales sit amet.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/307/300">
    <div class="tracklist">Aliquam aliquam a est eget cursus. Ut eu tempus justo, rutrum dapibus ex. In hac habitasse platea dictumst. Nulla ornare nisi sit amet arcu semper maximus.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/308/300">
    <div class="tracklist">Duis sit amet eros non est lacinia posuere et et ex. Proin in dui ornare ex eleifend pharetra. Etiam eros urna, euismod eget porttitor et, tempor quis turpis.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/309/300">
    <div class="tracklist">Nunc auctor lorem vitae neque sodales cursus. Sed scelerisque tempor tincidunt. Praesent eu pretium mi. Duis vitae venenatis nunc.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/310/300">
    <div class="tracklist">Nam mattis ipsum at metus placerat maximus. Sed sed enim nunc. Aenean dapibus, lorem non congue volutpat, tortor orci egestas leo, eu efficitur erat orci sit amet libero.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/311/300">
    <div class="tracklist">Etiam feugiat tempus nibh, quis mattis enim porttitor eu. Praesent congue gravida nisi, sit amet convallis lectus sagittis et.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/312/300">
    <div class="tracklist">Mauris tristique, leo sit amet aliquam varius, urna elit scelerisque nisi, non iaculis lectus augue id sapien. Phasellus euismod tellus in sodales finibus.</div>
  </div>
</div>

What we have so far is a page containing all the covers and track lists. It is usable even now, before we add any interactivity. Now let’s proceed to make it interactive.

We want to hide the tracklists initially, then add script to hide and show the tracklists as we click on the covers. Again, please use the full page link after running the snippet.

document.addEventListener('click', evt => {
  if (evt.target.nodeName != 'IMG') return
  const d = evt.target.closest('div')
  if (d.classList.contains('expanded')) {
    d.classList.remove('expanded')
    return
  }
  document.querySelectorAll('.expanded').forEach(e => {
    e.classList.remove('expanded')
  })
  d.classList.add('expanded')
})

body {
  margin: 1.5em;
  font-family: sans-serif;
  font-size: 12px;
}

.d1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  grid-gap: 1.5em;
}

.d1 img {
  display: block;
  width: 100%;
}

.d1 .tracklist {
  display: none;
}

.d1 .expanded .tracklist {
  display: block;
  margin-top: 1.5em;
  padding: 1em;
  background: darkseagreen;
}

<div class="d1">
  <div>
    <img src="https://donald.au/bugs/so-78583658/michaeljackson_thriller.jpg">
    <div class="tracklist">
      Wanna Be Startin’ Somethin’<br>
      Baby Be Mine<br>
      The Girl Is Mine<br>
      Thriller<br>
      Beat It<br>
      Billie Jean<br>
      Human Nature<br>
      P.Y.T. (Pretty Young Thing)<br>
      The Lady in My Life<br>
    </div>
  </div>
  <div>
    <img src="https://donald.au/bugs/so-78583658/acdc_backinblack.jpg">
    <div class="tracklist">
      Hells Bells<br>
      Shoot To Thrill<br>
      What Do You Do for Money Honey<br>
      Give the Dog a Bone<br>
      Let Me Put My Love into You<br>
      Back in Black<br>
      You Shook Me All Night Long<br>
      Have a Drink on Me<br>
      Shake a Leg<br>
      Rock and Roll Ain’t Noise Pollution<br>
    </div>
  </div>
  <div>
    <img src="https://donald.au/bugs/so-78583658/whitneyhouston_thebodyguard.jpg">
    <div class="tracklist">
      I Will Always Love You<br>
      I Have Nothing<br>
      I’m Every Woman<br>
      Run To You<br>
      Queen Of The Night<br>
      Jesus Loves Me<br>
      Even If My Heart Would Break<br>
      Someday (I’m Coming Back)<br>
      It’s Gonna Be a Lovely Day<br>
      (What’s So Funny ’Bout) Peace, Love, and Understanding<br>
      Waiting For You<br>
      Trust in Me<br>
      Theme from <em>The Bodyguard</em><br>
    </div>
  </div>
  <div>
    <img src="https://donald.au/bugs/so-78583658/pinkfloyd_thedarksideofthemoon.jpg">
    <div class="tracklist">
      Speak to Me<br>
      Breathe (In the Air)<br>
      On the Run<br>
      Time<br>
      The Great Gig in the Sky<br>
      Money<br>
      Us and Them<br>
      Any Colour You Like<br>
      Brain Damage<br>
      Eclipse<br>
    </div>
  </div>
  <div>
    <img src="https://picsum.photos/id/299/300">
    <div class="tracklist">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/301/300">
    <div class="tracklist">Cras volutpat velit non mi sagittis condimentum. Cras tempor aliquet turpis sed pretium. Nunc aliquet sodales turpis quis ultrices.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/302/300">
    <div class="tracklist">Nulla rhoncus aliquam mauris, eu pretium dolor auctor in. Maecenas a sollicitudin dolor, eget commodo quam. Proin et dui sed ligula vulputate egestas.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/304/300">
    <div class="tracklist">Curabitur eget ullamcorper justo, sit amet dictum neque. Fusce vitae ligula et felis auctor vulputate vel suscipit nibh.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/305/300">
    <div class="tracklist">Sed sed cursus leo. Nam molestie eleifend leo, nec fermentum risus maximus ac. Pellentesque eget placerat ipsum. Vestibulum tempor quam justo.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/306/300">
    <div class="tracklist">Mauris vulputate quam ac purus laoreet, nec ultrices eros placerat. Fusce id nisi ex. Nunc ornare tellus nisl, suscipit fermentum quam sodales sit amet.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/307/300">
    <div class="tracklist">Aliquam aliquam a est eget cursus. Ut eu tempus justo, rutrum dapibus ex. In hac habitasse platea dictumst. Nulla ornare nisi sit amet arcu semper maximus.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/308/300">
    <div class="tracklist">Duis sit amet eros non est lacinia posuere et et ex. Proin in dui ornare ex eleifend pharetra. Etiam eros urna, euismod eget porttitor et, tempor quis turpis.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/309/300">
    <div class="tracklist">Nunc auctor lorem vitae neque sodales cursus. Sed scelerisque tempor tincidunt. Praesent eu pretium mi. Duis vitae venenatis nunc.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/310/300">
    <div class="tracklist">Nam mattis ipsum at metus placerat maximus. Sed sed enim nunc. Aenean dapibus, lorem non congue volutpat, tortor orci egestas leo, eu efficitur erat orci sit amet libero.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/311/300">
    <div class="tracklist">Etiam feugiat tempus nibh, quis mattis enim porttitor eu. Praesent congue gravida nisi, sit amet convallis lectus sagittis et.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/312/300">
    <div class="tracklist">Mauris tristique, leo sit amet aliquam varius, urna elit scelerisque nisi, non iaculis lectus augue id sapien. Phasellus euismod tellus in sodales finibus.</div>
  </div>
</div>

The final step is to move each tracklist to the left so that it aligns with the left edge of the grid (using relative positioning) and set its width to match the grid width. We’ll need to calculate this positioning information not only when the page first loads, but whenever it is resized as well. Again, please use the full page link after running the snippet.

const d1 = document.querySelector('.d1')

const calcTracklistPositions = () => {
  const d1Rect = d1.getBoundingClientRect()
  Array.from(d1.children).forEach(e => {
    const tl = e.querySelector('.tracklist')
    tl.style.left = (-1 * (e.getBoundingClientRect().left - d1Rect.left)) + 'px'
    tl.style.width = d1Rect.width + 'px'
  })
}

window.addEventListener('resize', calcTracklistPositions)
calcTracklistPositions()

document.addEventListener('click', evt => {
  if (evt.target.nodeName != 'IMG') return
  const d = evt.target.closest('div')
  if (d.classList.contains('expanded')) {
    d.classList.remove('expanded')
    return
  }
  document.querySelectorAll('.expanded').forEach(e => {
    e.classList.remove('expanded')
  })
  d.classList.add('expanded')
})

body {
  margin: 1em;
  font-family: sans-serif;
}

.d1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  grid-gap: 1rem;
}

.d1 img {
  display: block;
  width: 100%;
}

.d1 .tracklist {
  display: none;
}

.d1 .expanded .tracklist {
  display: block;
  margin-top: 1em;
  padding: 1em;
  background: darkseagreen;
  position: relative;
  box-sizing: border-box;
}

<div class="d1">
  <div>
    <img src="https://donald.au/bugs/so-78583658/michaeljackson_thriller.jpg">
    <div class="tracklist">
      Wanna Be Startin’ Somethin’<br>
      Baby Be Mine<br>
      The Girl Is Mine<br>
      Thriller<br>
      Beat It<br>
      Billie Jean<br>
      Human Nature<br>
      P.Y.T. (Pretty Young Thing)<br>
      The Lady in My Life<br>
    </div>
  </div>
  <div>
    <img src="https://donald.au/bugs/so-78583658/acdc_backinblack.jpg">
    <div class="tracklist">
      Hells Bells<br>
      Shoot To Thrill<br>
      What Do You Do for Money Honey<br>
      Give the Dog a Bone<br>
      Let Me Put My Love into You<br>
      Back in Black<br>
      You Shook Me All Night Long<br>
      Have a Drink on Me<br>
      Shake a Leg<br>
      Rock and Roll Ain’t Noise Pollution<br>
    </div>
  </div>
  <div>
    <img src="https://donald.au/bugs/so-78583658/whitneyhouston_thebodyguard.jpg">
    <div class="tracklist">
      I Will Always Love You<br>
      I Have Nothing<br>
      I’m Every Woman<br>
      Run To You<br>
      Queen Of The Night<br>
      Jesus Loves Me<br>
      Even If My Heart Would Break<br>
      Someday (I’m Coming Back)<br>
      It’s Gonna Be a Lovely Day<br>
      (What’s So Funny ’Bout) Peace, Love, and Understanding<br>
      Waiting For You<br>
      Trust in Me<br>
      Theme from <em>The Bodyguard</em><br>
    </div>
  </div>
  <div>
    <img src="https://donald.au/bugs/so-78583658/pinkfloyd_thedarksideofthemoon.jpg">
    <div class="tracklist">
      Speak to Me<br>
      Breathe (In the Air)<br>
      On the Run<br>
      Time<br>
      The Great Gig in the Sky<br>
      Money<br>
      Us and Them<br>
      Any Colour You Like<br>
      Brain Damage<br>
      Eclipse<br>
    </div>
  </div>
  <div>
    <img src="https://picsum.photos/id/299/300">
    <div class="tracklist">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/301/300">
    <div class="tracklist">Cras volutpat velit non mi sagittis condimentum. Cras tempor aliquet turpis sed pretium. Nunc aliquet sodales turpis quis ultrices. Duis auctor accumsan enim, quis maximus ex malesuada a. Donec a felis ut erat tempus euismod non vel neque. Proin lectus massa, sagittis at imperdiet nec, consequat ut neque. Sed vel placerat neque, vel varius urna. Vivamus interdum euismod urna a accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/302/300">
    <div class="tracklist">Nulla rhoncus aliquam mauris, eu pretium dolor auctor in. Maecenas a sollicitudin dolor, eget commodo quam. Proin et dui sed ligula vulputate egestas. Quisque eget augue vitae purus placerat pharetra. Aliquam rhoncus convallis lorem, sed facilisis odio blandit scelerisque. Vivamus viverra urna ac nulla interdum, eget ullamcorper leo maximus. Mauris nec feugiat enim. Nam congue, dui sit amet vestibulum posuere, leo mauris fermentum lorem, eget bibendum velit nunc quis leo.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/304/300">
    <div class="tracklist">Curabitur eget ullamcorper justo, sit amet dictum neque. Fusce vitae ligula et felis auctor vulputate vel suscipit nibh. Integer a felis varius purus vestibulum viverra. Morbi venenatis placerat augue sit amet commodo. Sed dapibus molestie eros, vitae ultrices nunc commodo aliquam. Vivamus tempus mollis massa vel egestas. Donec ut ante quis eros commodo volutpat. Proin sem nisi, viverra ac sem tristique, consectetur laoreet sapien. Vivamus suscipit orci vel euismod scelerisque. Nullam sed pulvinar tellus. Nullam pulvinar arcu eget nibh rutrum, eget faucibus ligula ullamcorper.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/305/300">
    <div class="tracklist">Sed sed cursus leo. Nam molestie eleifend leo, nec fermentum risus maximus ac. Pellentesque eget placerat ipsum. Vestibulum tempor quam justo. Fusce dapibus turpis non ante faucibus suscipit. Fusce rhoncus eleifend ipsum et lacinia. Curabitur nec congue arcu. Mauris dignissim magna ligula. Nullam ultrices, metus sit amet ultrices porttitor, turpis ligula interdum enim, eu pellentesque purus quam ut arcu. Nullam aliquet vitae tortor vel tincidunt. Fusce maximus lacus diam, sed elementum ligula condimentum vel. Sed consequat orci ac nunc gravida, at accumsan magna porttitor.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/306/300">
    <div class="tracklist">Mauris vulputate quam ac purus laoreet, nec ultrices eros placerat. Fusce id nisi ex. Nunc ornare tellus nisl, suscipit fermentum quam sodales sit amet. Ut ex magna, tempor nec ex sed, ornare ornare sem. Proin gravida turpis urna, vitae posuere purus consequat sit amet. Donec laoreet tempor massa. Praesent porta mauris vitae neque condimentum, non volutpat felis eleifend.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/307/300">
    <div class="tracklist">Aliquam aliquam a est eget cursus. Ut eu tempus justo, rutrum dapibus ex. In hac habitasse platea dictumst. Nulla ornare nisi sit amet arcu semper maximus. Praesent eu augue eget mi sodales sodales. Praesent sodales neque malesuada, euismod est in, lobortis turpis. Nam blandit facilisis mauris. Ut ac ex rhoncus, ornare velit ac, aliquam nibh. Quisque euismod mauris quis nisl consectetur vulputate. Pellentesque mattis, tellus ut dictum dictum, urna ligula sodales magna, euismod malesuada ipsum quam nec elit.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/308/300">
    <div class="tracklist">Duis sit amet eros non est lacinia posuere et et ex. Proin in dui ornare ex eleifend pharetra. Etiam eros urna, euismod eget porttitor et, tempor quis turpis. Nullam sollicitudin suscipit lorem, maximus pellentesque turpis dictum sed. Integer fringilla gravida tellus sit amet facilisis. Pellentesque vel porta justo. Proin vehicula eget tortor ut condimentum. Phasellus interdum urna a condimentum dapibus. Sed commodo elit a metus vestibulum, ac vehicula mi tincidunt. Duis ante quam, posuere eget purus et, mollis congue tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc quis orci porttitor, dictum libero sit amet, feugiat ipsum.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/309/300">
    <div class="tracklist">Nunc auctor lorem vitae neque sodales cursus. Sed scelerisque tempor tincidunt. Praesent eu pretium mi. Duis vitae venenatis nunc. Integer dolor sapien, vehicula ac dui id, fermentum malesuada justo. Donec ullamcorper enim sed nulla egestas condimentum. Etiam vitae dapibus sem, ut efficitur nulla. Donec laoreet, nunc quis aliquet blandit, erat nibh facilisis nibh, ut fermentum nisl dolor vel dui. Nunc pulvinar scelerisque urna, ut dictum purus placerat ac.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/310/300">
    <div class="tracklist">Nam mattis ipsum at metus placerat maximus. Sed sed enim nunc. Aenean dapibus, lorem non congue volutpat, tortor orci egestas leo, eu efficitur erat orci sit amet libero. Praesent quis convallis metus. Cras eget ligula nec tortor mollis vestibulum et facilisis tellus. Aliquam erat volutpat. Sed malesuada, lectus vulputate tristique mattis, lacus nisl tempus sem, in aliquet dolor neque sed nisl. Nulla facilisi. Nulla a pharetra felis, eu aliquet urna. Phasellus mattis mauris eget mauris laoreet, et accumsan magna laoreet. Maecenas a condimentum diam. Integer et neque odio.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/311/300">
    <div class="tracklist">Etiam feugiat tempus nibh, quis mattis enim porttitor eu. Praesent congue gravida nisi, sit amet convallis lectus sagittis et. Praesent rutrum ante nec lectus congue, congue pharetra sem efficitur. Vivamus eros mauris, pellentesque in aliquam at, vehicula consequat neque. Sed in pharetra lorem. Vivamus porttitor lectus risus. Vestibulum malesuada vestibulum ullamcorper. Nulla lacus purus, faucibus sit amet urna ac, placerat congue lectus. Ut iaculis risus eu pretium cursus. Quisque ac pharetra orci, ut convallis libero. Praesent auctor commodo quam sit amet aliquam. Integer tortor neque, cursus sit amet maximus sit amet, ultrices sed arcu. Nulla volutpat libero non ipsum auctor consectetur. Cras non malesuada felis, vel maximus ligula. Curabitur euismod porta semper. Ut posuere eget libero ac consequat.</div>
  </div>
  <div>
    <img src="https://picsum.photos/id/312/300">
    <div class="tracklist">Mauris tristique, leo sit amet aliquam varius, urna elit scelerisque nisi, non iaculis lectus augue id sapien. Phasellus euismod tellus in sodales finibus. Suspendisse potenti. Aenean malesuada sapien quis eleifend volutpat. Cras quam arcu, iaculis vel ornare vulputate, feugiat quis enim. Nullam auctor, libero vestibulum imperdiet tincidunt, justo tellus varius justo, a finibus magna purus eu est. Nam interdum odio in ligula ultricies, quis pulvinar lectus pulvinar. Fusce quis sem tincidunt, mattis massa eu, bibendum enim. Vivamus arcu arcu, aliquam eget suscipit id, tempor sed nibh. Nullam mi mauris, facilisis vitae massa a, facilisis vulputate velit. Phasellus facilisis egestas erat id elementum.</div>
  </div>
</div>