JSFiddle - React, Tailwind, and code Playground

by Kai_Draord

HTML

<div class="thing">
  <img src="https://unsplash.it/75/90/?blur" alt="hey there" class="thingImage" />
  <div class="content">
    <span class="thingName">Jibber Jabb Super Long Title of a Movie or Thing Here</span><br/>
    <span class="thingRanks">
       Rank1: 1<br/>
       Rank2: 2<br/>
       Rank3: 2
    </span>
  </div>
  <div class="thingMeta vcenter">
    <img src="https://unsplash.it/30/30/?blur" alt="name" class="thingIcon" />
    <span class="vcenter"><span class="thingAbbrev">ABC</span></span>
  </div>
</div>

CSS

.thing{
  border: 1px solid #ccc;
  width: 564px;
  min-height: 68px;
  padding: 10px;
  font-family: "Helvetica", arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  display: flex;
}
.thingImage{
  border-radius: 5px;
  margin-right: 10px;
}
.thingName{
  font-weight: bold;
  margin-right: 0.3em;
}
.thingMeta{
  margin-left: auto;
  align-self: flex-start;
  height: 35px;

}
.vcenter{
  display:flex;
  align-items:center;
  justify-content: center;
}
.thingAbbrev{
  border-bottom: medium solid #000000;
  border-left: medium solid #000;
  align-self: flex-start;
  padding-left: 5px;
  padding-bottom: 5px;
  margin-left: 10px;
  width: 30px;
}
.thingIcon{
  height: 30px;
}