JSFiddle - React, Tailwind, and code Playground

by BaronGrivet

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

<ul>
<li><i class="fas fa-film"></i> <span class="title">The GodFather</span><i class="far fa-star"></i></li>
<li><i class="fas fa-film"></i> <span class="title">The Shawshank Redemption</span><i class="far fa-star"></i></li>
<li><i class="fas fa-film"></i> <span class="title">The Good, the Bad and the Ugly</span><i class="far fa-star"></i></li>
<li><i class="fas fa-film"></i> <span class="title">Lock, Stock and Two Smoking Barrels</span><i class="far fa-star"></i></li>
<li><i class="fas fa-film"></i> <span class="title">Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb</span><i class="far fa-star"></i></li>
</ul>

CSS

html {
  font-family: sans-serif;
}

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul {
  width: 250px;
}

li {
 display: flex;
  align-items: center;
border: 1px #ccc solid;
  padding: 0 1em;
}

i.fa-star {
  margin-left: auto;
  line-height: 3em;
  vertical-align: middle;
}