Html Span中的文本定位

我正在尝试显示与所附图像类似的图像和文本：

以下是我尝试过的代码：

我在一个div中包含了3个跨距，但是我无法设置跨距相对于图像的位置

<div>
                    <span>
                        <img id="productURL" src="https://images.app.goo.gl/xH1qtjAt7krCiXicA" alt="Product Image" width="50" height="60"/>
                    </span>
                    <span style="bottom:10px;">
                        Product Name X 5
                        <br/>
                        50 Kg | 6 Cs
                    </span>
                    <span>
                        500
                    </span>
                </div>

产品名称x5


50公斤| 6厘米
500

使用以下代码：

<div style="display: flex;">
        <span>
          <img
            id="productURL"
            src="https://usabilla.com/graphics/resources/usabilla-logo.png"
            alt="Product Image"
            width="50"
            height="60"
          />
        </span>
        <div>
          <span style="bottom:10px;">
            Product Name X 5
            <br />
            50 Kg | 6 Cs
          </span>
          <span>500</span>
        </div>
      </div>

产品名称x5


50公斤| 6厘米
500

你试过给它一个职位吗？比如“底部”之前的“位置：绝对”？ 如底部、顶部、左边或右边的东西不工作，除非你告诉他们你给它的位置。< / P>请考虑为我们创造一个你目前的问题。