Every layout goal must take hours of frustrating intuition-destroying trial and error, followed by documentation cross-examination, MRE building, upstream bug-filing, and workaround pursuits.

https://jsfiddle.net/uz5dr8h4/21/

But no, CSS doesn't suck, you're just bad at it.

I'm sure someone out there can design CSS layouts with little effort, but I've never met them.

The problem with CSS is the same as with JS.
It doesn’t suck. It was made two decades ago for websites.
Today we abuse the web technology to build bullshit web-apps with complex and stateful UI.
CSS and HTML is not made for that.
All of the additions that were made to CSS in all those years made it an abomination of inconsistent hacks.

The rendering engine literally wraps the pixel matter around when you use column-count. I won't suggest flex or grids — you probably already know about them, plus the exact behavior of column-count can't be replicated using those. If you absolutely have to use columns made with column-count, make your tooltips absolute relative to body, not icon, and calculate left and top values with JS. Recalculate on page resize with debounce.

@Lensflare The code snippet is literally just a two-column container with tooltips that's blowing apart.

@kiki Thanks for actually diving into the specific issue.

This was just an MRE demonstrating the odd behavior of column-count in Chrome and Safari (it's implemented better in Firefox). My actual use case was suitable for a float-based workaround since the stacking order wasn't significant.

And you're spot on that flex and grid can't replicate column-count. That was a hard-earned lesson in my case.