How add image and text to popup of leaflet map - dictionary

Question

I want to add image and text to popup of leaflet map such as this link:
https://www.bookdepository.com/
I can add image But How I can add text near the image?
my code is here:
<div id="map" style="width:270px;height:310px;"></div>
<?php
$matrix = [
[34.05777800, 51.48416700],
[38.50972200, 46.65444400],
[29.26666700, 51.21666700],
[34.05777800, 51.48416700],]
?>
<script type="text/javascript">
var matrix = JSON.parse('<?php echo json_encode($matrix);?>');
var map = L.map('map').setView(matrix[0],7);
var i = 1;
function myLoop() {
setTimeout(function () {
var div = L.DomUtil.create('div', 'my-div');
var img = L.DomUtil.create('img', 'my-img',div);
img.style.width = '60px';
img.style.height = '80px';
div.style.textAlign = 'right';
img.src = 'http://127.0.0.1:8000/productImages/64517.jpg';
L.marker(matrix[i]).addTo(map)
.bindPopup(div)
.openPopup();
map.flyTo(matrix[i]);
i++;
if (i < 10) {
myLoop();
}
}, 6000)
}
L.tileLayer('https://stamen-tiles
{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
ext: 'jpg'
}).addTo(map);
myLoop();
</script>
My output is this pic:

Answer 1

You can use bindpopup function of leaflet to attach a pop up with your custom html.
marker.bindPopup("<div>Your custom html</div>");
You can find more information here.

Answer 2

You can indeed use the .bindPopup method like this (in your case) :
matrix
.bindPopup("<div> <p>Text</p> <img src="path/or/url"/> </div>");
Nevertheless it seems that using the css background-image in a <span> tag as popup image doesn't work correctly, I recommend using an <img> tag.
Hope it's helpful, you can find more information on methods there.