JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

h4 wrapped in div
<ul class="grid">
    <li><a class="thumb"><img src="http://img.youtube.com/vi/lxHkSNnB13A/0.jpg"></a><div class="description"><h4>long title long title long title </h4></div></li>    
</ul>

unwrapped h4
<ul class="grid">
    <li><a class="thumb"><img src="http://img.youtube.com/vi/lxHkSNnB13A/0.jpg"></a><h4>long title long title long title </h4></li>    
</ul>

CSS

ul.grid li {
  background: rgba(0,0,0,0.2);
  display: inline-block;
  width: 310px;
  padding:10px;
  margin-right: 5px;
}
ul.grid li.no-margin {
  margin-right: 0;
}
ul.grid .thumb,
ul.grid .description {
  float:left;
}

ul.grid img {
  border:none ;
}
ul.grid li h4 {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;

}
.thumb {
  overflow: hidden;
  height:95px;
}
.thumb img {
  height: 127px;
  width: 142px;
  margin-top: -16px;
}

ul.grid .description {
  /*padding:5px;*/
}