JSFiddle - React, Tailwind, and code Playground

HTML

<dl class="item-grid">
    <dd class="child" data-name="DJ Jay&#39;s &quot;Cool Beats&quot; $%!&#39;" data-desc="Best Dance 24/7" data-location="Some Cool Place, USA" data-genre="Dubstep Beats" style="background-image: url(http://fc01.deviantart.net/fs22/i/2009/246/1/b/NEW_Moth_Signs_Album_Art_by_pantseeker.png);"></dd>
    <dd class="child"></dd>
    <dd class="child"></dd>
    <dd class="child"></dd>
    <dd class="child"></dd>
    <dd class="child"></dd>
    <dd class="child"></dd>
</dl>

CSS

.child {
    height: 44px;
    background-color: lightgrey;
    border-bottom: 1px solid grey;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-size: 12px;
    padding-left: 48px;
    position: relative;
    margin: 0;
    background-size: 36px 36px;
    background-repeat: no-repeat;
    background-position: 3px;    
}
.child:first-line {
    font-size: 18px;
}
.child:before {
    position: relative;
    content: attr(data-name)'\A'attr(data-location);
    white-space: pre;
    width: 67%;
    top: 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
}
.child:after {
    position: absolute;
    top: 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
    content: '\A'attr(data-desc)'\A'attr(data-genre);
    padding-right: 32px;
    right: 0;
    width: 33%;
    text-align: right;
    margin-top: -14px;
    padding-bottom: 14px;
    background-repeat: no-repeat;
    background-position: right 19px;
    display: block;
    background-image:...