JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="grid">
    <li>
        <a class="thumb">
            <img src="http://img.youtube.com/vi/lxHkSNnB13A/0.jpg">
        </a>
        <div class="description">
            <h4>long titl erft wef wef wef wef wefitle long title</h4>
            <p>stuff</p>
            <p>stuff</p>
            <p>stuff</p>
            <p>stuff</p>
            <p>stuff</p>
            <p>stuff</p>
            <p>stuff</p>
            <p>stuff</p>
            <p>stuff</p>
        </div>
    </li>    
</ul>

CSS

* { box-sizing: border-box; }

ul.grid li {
  background: rgba(0,0,0,0.2);
  display: inline-block;
  width: 310px;
  padding: 10px;
  padding-left: 162px;
  min-height: 150px;
  margin-right: 5px;
}
ul.grid .thumb {
  position: absolute;
  left: 10px; top: 10px;
}
ul.grid .description {
}

ul.grid img {
  border:none ;
}
ul.grid li .description {
}
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;*/
}