<div class="card" style="width:18rem;">
  <img class="card-img-top" src="https://image.tmdb.org/t/p/w500/nBNZadXqJSdt05SHLqgT0HuC5Gm.jpg" alt="Interstellar">
  <div class="card-body">
    <h4 class="card-title">Interstellar (2014)</h4>
    
    <div class="container">
                     <div class="row">
                        <div class="col-sm-4 metadata">
                           <i class="fa fa-star" aria-hidden="true"></i> 
                           <p>9.5/10</p>
                        </div>
                        <div class="col-sm-8 metadata">Adventure. Sci-Fi</div>
                     </div>
                  </div> 
    
    <p class="card-text">In Earth's future, a global crop blight and second Dust Bowl are slowly rendering the planet uninhabitable.</p>
    <a class="trailer-preview" href="https://youtu.be/ePbKGoIGAXY" target="new"><i class="fa fa-play" aria-hidden="true"></i></a>
  </div>
</div>

.trailer-preview {
  background-color: #ff3d49;
  position: absolute;
  top: 395px;
  right: 18px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: white;
  font-size: 24px;
  text-align: center;
  padding-top: 13px;
}
.trailer-preview:hover, .trailer-preview:disabled, .trailer-preview:active, .trailer-preview:focus {
  background-color: #c41200;
  color: white;
}
.trailer-preview i {
  margin-left: 5px;
}

.metadata {
  background: none;
  padding: 0;
  position: relative;
  border-style: none;
}

.metadata {
  font-size: 16px;
}
.metadata i, .metadata p {
  float: left;
}
.metadata p {
  margin-top: 0;
  margin-left: 10px;
}
.metadata i {
  color: #ff9d00;
  margin-top: 5px;
  margin-left: 1px;
}