JSFiddle - React, Tailwind, and code Playground
HTML
<div class="thumbnailwrapper">
<!--link here-->
<a href="">
<!--name here-->
<span class="artist-name">The Birdman Rallies</span>
<div class="artiststhumbnail">
<!--image here-->
<img src="http://newbornsounds.coffeecup.com/artistspictures/The%20Birdman%20Rallies/lamps.jpg" height="100%" alt="The Birdman Rallies" border="0" ></div>
<div class="genre">Electro/acoustic blend</div></a>
</div>
<div class="thumbnailwrapper">
<!--link here-->
<a href="">
<!--name here-->
<span class="artist-name">The Birdman Rallies Again and Again</span>
<div class="artiststhumbnail">
<!--image here-->
<img src="http://newbornsounds.coffeecup.com/artistspictures/The%20Birdman%20Rallies/lamps.jpg" height="100%" alt="The Birdman Rallies" border="0" ></div>
<div class="genre">Electro/acoustic blend</div></a>
</div>
<div class="thumbnailwrapper">
<!--link here-->
<a href="">
<!--name here-->
<span class="artist-name">The Birdman Rallies</span>
<div class="artiststhumbnail">
<!--image here-->
<img src="http://newbornsounds.coffeecup.com/artistspictures/The%20Birdman%20Rallies/lamps.jpg" height="100%" alt="The Birdman Rallies" border="0" ></div>
<div class="genre">Electro/acoustic blend</div></a>
</div>
CSS
.thumbnailwrapper {
width:137px;color:#2A2A2A;margin:15px 10px;
border-radius:0.2em;
background-color:#E9F7FE; padding:5px;
border-color:#DADADA; border-style:solid;
border-width:thin; font-size:15px;
text-align:center;
float:left;
}
.artiststhumbnail {
width:133px; height:130px;
text-align:center;overflow:hidden;
border-color:#DADADA;
border-style:solid; border-width:thin;
background-color:white; display:inline-block;
}
.genre {
font-size:12px; font-weight:bold;
color:#2A2A2A;
}
JavaScript
$(document).ready(function(){
$('.artist-name').each(function(idx, val){
//lets get the height of the current artist name span
var nameHeight = $(this).height();
//if you uncomment out the console.log value, you'll see the
//single-line height is x, two lines is y. we can use that
//as our test to resize the image...
//console.log($(this).height());
if(nameHeight > 20){
$(this).siblings('.artiststhumbnail').css({'height':'111px'});
}
});
});