and set the title to display: inline to make sure it flows around the float rather than popping down below it (due to taking up the complete width of the box)
It wouldn't. The p block would be behind the float (wouldn't see it at all) while the p's inline content wraps around the float. Give the dimensionless p a background colour and give the image a left margin so you can see behind it a bit.
Exception: giving the p Haslayout means IE will treat the p as if it were a fellow float, which might make it drop down, or might make it squish in the space next to the image, depending on how that was set up.
<img src="image.png" alt="pen">
Or substitute p for div if that doesn't count as a "paragraph" to someone. Not sure what the relationship is for all that content, so spans might not be best. Is this supposed to be where the image and the green area is??
You could set newlines using :after and "content" if you want to be creative...
...depends if the newline between title and price is content or decoration. If it's content you could conceiveably have a single span with a br inside it. If it's just for looks, css.
I'm not sure about the header tag if all that's underneath is a single price. If there's a description though...