<figure class="movie">
  <div class="movie__hero">
    <img src="https://www.mensjournal.com/wp-content/uploads/2018/10/rambo-main-3.jpg?quality=86&strip=all" alt="Rambo" class="movie__img">
  </div>
  <div class="movie__content">
    <div class="movie__title">
      <h1 class="heading__primary">First Blood Part II <i class="fas fa-fire"></i></h1>
      <div class="movie__tag movie__tag--1">#action</div>
      <div class="movie__tag movie__tag--2">#thriller</div>
    </div>
    <p class="movie__description">
      First Blood is a 1982 American action film directed by Ted Kotcheff, and co-written by Sylvester
      Stallone, who also stars as Vietnam War veteran John Rambo.
    </p>
    <div class="movie__details">
      <p class="movie__detail"><span class="icons icons-red"><i class="fas fa-camera-retro"></i> </span>Buzz
        Feitshans</p>
      <p class="movie__detail"><span class="icons icons-grey"><i class="fas fa-clock"></i> </span>1h 33m</p>
      <p class="movie__detail"><span class="icons icons-yellow"><i class="fas fa-file-invoice-dollar"></i>
        </span>$12.52 crores</p>
    </div>
  </div>
  <div class="movie__price">$12.56</div>
</figure>
/*  
background-color: #A9C9FF;
background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%);

*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #444;
    background:linear-gradient(to right bottom, #A9C9FF 0%, #FFBBEC 100%); 
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.movie {
    max-width: 800px;
    border-radius: 5px;
    display: flex;
    box-shadow: 0 5px 20px 10px rgba(0, 0, 0, .2);
   overflow: hidden;
}

.movie__hero {
  flex: 0 0 45%;
}

.movie__img {
    width: 100%;
    display: block;
}

.movie__content {
    background-color: #fff;
    flex: 1;
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
}

.movie__price {
    background:linear-gradient(to bottom, #A9C9FF 0%, #FFBBEC 100%);
    flex: 0 0 50px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    color: rgb(255, 255, 255);
    writing-mode: vertical-lr;
    display: flex;
    align-items: center;
    justify-content: center;
}

.movie__title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.heading__primary {
    font-size: 16px;
    margin-right: auto;
    color: royalblue;
}

.fa-fire {
    color: salmon;
}

.movie__tag {
    font-size: 10px;
    color: #fff;
  padding: 2px 7px;
  border-radius: 100px;
  margin-right: 8px;
  display: block;
  text-transform: uppercase;

}

.movie__tag--1 {
  background-color: #A9C9FF;
}

.movie__tag--2 {
    background-color:#FFBBEC;
}

.movie__description {
    font-size: 14px;
}

.movie__details {
    display: flex;
    margin: auto;
}

.movie__detail {
   font-size: 13px;
   margin-right: 20px;
   display: flex;
   align-items: center;
}

.icons i {
    margin-right: 3px;
    font-size: 18px;
}

.icons-red {
    color: salmon;
}
.icons-grey {
    color: grey;
}

.icons-yellow {
    color: rgb(190, 190, 71);

}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.