如何调整图像数组和文本的大小以最适合父容器？

Question

我正在为我的公司创建一个网站。我很缺乏经验，我在那做实习生。我必须在这个网站上做报告。为此，我创建了“卡片”，每个卡片将显示此报告的一部分。现在，我正在研究“心脏般的”乐谱显示。我对如何在this SO question中执行此操作具有深刻的见识。我现在想做的是拥有一个看起来像这样的东西：https://ibb.co/VYBzXtQ 分数显示在心的左侧。我目前遇到的主要问题是，我希望心脏最适合父容器。

您可能会在jsfiddle中看到，这是我正在使用的体系结构：

<div>
    <div>
        <div>
            //my hearts display
        </div>
    </div>
</div>

我尝试使用flexbox，但无济于事。

为了最好地描述我的问题，我创建了一个jsfiddle： https://jsfiddle.net/dLr1v32y/5/

我希望分数显示在容器的标题下方。在它的右边，适合剩下的所有空间，我想要5颗心。请注意，我对提供给我的解决方案感到满意，我只是想进行调整以使其最适合容器。 任何帮助，将不胜感激。谢谢！