title: How can I resize image array and text to best fit the parent container?
body: <p>I'm creating a website for my company. I'm quite inexperimented, I'm working there as an intern. I have to do a reporting on this website. To do so, I have created "cards" that will each display a part of this reporting. Right now, I'm working on a "heart-like" score display. I have had great insight on how to do that in <a href="https://stackoverflow.com/questions/55741861/is-there-an-easy-way-or-a-workaround-to-display-different-looking-image-dependin/55742537?noredirect=1#comment98163368_55742537">this SO question</a>. What I would like to do now is to have something that looks like that : <a href="https://ibb.co/VYBzXtQ" rel="nofollow noreferrer">https://ibb.co/VYBzXtQ</a>
  with the score displayed on the left of the hearts. The main issue I currently have is that I'd like the hearts to best fit the parent container.</p>
  
  <p>As you might see in the jsfiddle, this is the architecture I'm using:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div&gt;
          &lt;div&gt;
              //my hearts display
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried playing around with flexbox, to no avail.</p>
  
  <p>To best describe what my issue is, I created a jsfiddle:
  <a href="https://jsfiddle.net/dLr1v32y/5/" rel="nofollow noreferrer">https://jsfiddle.net/dLr1v32y/5/</a></p>
  
  <p>I'd like the score to be displayed on the left of the container, under the title. On its right, fitting all the space left, I'd like to have the 5 hearts. Note that I'm happy with the solution that was offered to me, I just would like the tweaks to make it fit best the container.
  Any help would be appreciated. Thank you!</p>