I'm trying to show image and text similar to the attached image:

[![enter image description here](https://i.stack.imgur.com/IVYVc.png)](https://i.stack.imgur.com/IVYVc.png)

Here is my code which I tried: <https://jsfiddle.net/ghdqty2w/1/>

I have included 3 spans in one div, but I'm not able to set the position of span with respect to the image.

```
<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>

```