How to put a div above the Leaflet so that it doesn't take up the full width of the container?

Question

css

Demo is here.
There is a Leaflet card. I need to place a div over it, but if I place a div and write a small text there, then the div is stretched by 100% and the map cannot be moved (dragged) along the empty sides of the div, it is covered by the div.
How do I put a div that only stretches to the width it needs?

Answer 1

display: inline-block so that the div does not stretch, or wrap it in a span instead of a div. or as mentioned above pointer-events: none; , if you do not need a reaction to the element