<div class="albums">
    <div class="album">
      <img class="album__artwork" src="https://source.unsplash.com/random/300x300?v=1">
      <div class="album__details">
        <h2>Album Title</h2>
        <p class="album__artist">Artist Name</p>
        <p class="album__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.</p>
        <p class="album__desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis, excepturi!</p>
    </div>
  </div>
  <div class="album">
    <img class="album__artwork" src="https://source.unsplash.com/random/300x300?v=2">
    <div class="album__details">
      <h2>Album Title</h2>
      <p class="album__artist">Artist Name</p>
      <p class="album__desc">short.</p>
    </div>
  </div>
  <div class="album">
    <img class="album__artwork" src="https://source.unsplash.com/random/300x300?v=3">
    <div class="album__details">
      <h2>Album Title</h2>
      <p class="album__artist">Artist Name</p>
      <p class="album__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.</p>
    </div>
  </div>
  <div class="album">
    <img class="album__artwork" src="https://source.unsplash.com/random/300x300?v=4">
    <div class="album__details">
      <h2>Album Title</h2>
      <p class="album__artist">Artist Name</p>
      <p class="album__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.</p>
    </div>
  </div>
  <div class="album">
    <img class="album__artwork" src="https://source.unsplash.com/random/300x300?v=5">
    <div class="album__details">
      <h2>Album Title</h2>
      <p class="album__artist">Artist Name</p>
      <p class="album__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.</p>
    </div>
  </div>
  <div class="album">
    <img class="album__artwork" src="https://source.unsplash.com/random/300x300?v=6">
    <div class="album__details">
      <h2>Album Title</h2>
      <p class="album__artist">Artist Name</p>
      <p class="album__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.</p>
    </div>
  </div>
  <div class="album">
    <img class="album__artwork" src="https://source.unsplash.com/random/300x300?v=7">
    <div class="album__details">
      <h2>Album Title</h2>
      <p class="album__artist">Artist Name</p>
      <p class="album__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.</p>
    </div>
  </div>
  <div class="album">
    <img class="album__artwork" src="https://source.unsplash.com/random/300x300?v=8">
    <div class="album__details">
      <h2>Album Title</h2>
      <p class="album__artist">Artist Name</p>
      <p class="album__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.</p>
    </div>
  </div>
  <div class="album">
    <img class="album__artwork" src="https://source.unsplash.com/random/300x300?v=9">
    <div class="album__details">
      <h2>Album Title</h2>
      <p class="album__artist">Artist Name</p>
      <p class="album__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.</p>
    </div>
  </div>
  <div class="album">
    <img class="album__artwork" src="https://source.unsplash.com/random/300x300?v=10">
    <div class="album__details">
      <h2>Album Title</h2>
      <p class="album__artist">Artist Name</p>
      <p class="album__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.</p>
    </div>
  </div>
</div>
body {
min-height: calc(100vh - 100px);
margin: 50px;
background: white;
background-position: fixed;
letter-spacing: -1px;
}
.albums {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.album {
  align-items: center;
  background: rgba(255, 255, 255, .2);
  box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  font-weight: 100;
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-column-gap: 20px;
  padding: 20px;
}
.album__artwork {
  width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.