title: top, bottom, right, left values not working as flex container is set as justify-content: center
body: <p>Im trying to make the 'rating-block' to be positioned at the bottom-right side of 'card'. But these values don't work as its container has justify-content centre so it will force it in the centre. Is there a better way to position it to the bottom right?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.card {
      width: 210px;
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: green;
      position: relative
  }
  
  .card-img {
      display: flex;
      width: 50%;
      
  }
  
  .rating-block {
      background-color: white;
      border-radius: 10px;
      position: absolute;
      padding: 0 10px;
      top: 100px;
  }
  
  .rating {
      margin: 0px
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;/head&gt;
  &lt;body&gt;  
      &lt;div class="card"&gt;
          &lt;img src="https://m.media-amazon.com/images/I/41rsAHrKw1L._AC_SY580_.jpg" alt="card-1" class="card-img"&gt;
          &lt;div class="rating-block"&gt;
              &lt;p class="rating"&gt;4.5&lt;/p&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;    
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>