Responsiveness - Vertically centered element

Hi there,

I’m creating a restaurant menu page with Bubble and I’m having some difficulties making it responsive. I solved most of them by myself, but there is one thing I cannot get over.

I need the price on the right to be centered while on desktop, but I also need to collapse its margins so there is not so much blank space when on mobile. When I tried setting the text element height to fill the entire row with vertically centered text, it looks like on screenshot below. After that, I tried almost everything, starting from putting it into group and collapsing its height when hidden, ending with two independent elements or even groups with conditional hiding (current state, I even gave up having the text element centered and just stick with having it near the top corner). I’m not able to get it working so it doesn’t look ridiculous either on desktop or mobile…

If you don’t mind giving a look at it, I would be super grateful, as I spent like a day just with this issue.

Link to the testing version: (price on the right is currently showed conditionally so it’s not visible)

Already solved it by myself. Draft of my solution attached below if anyone had the same problem.