We've seen text border a circle like this:

[![enter image description here](https://i.stack.imgur.com/oycyK.png)](https://i.stack.imgur.com/oycyK.png)

But I need to have text blocks align around a circle, similar to this:

[![enter image description here](https://i.stack.imgur.com/GHutN.png)](https://i.stack.imgur.com/GHutN.png)

I've tried different ways to block the text (internal spans, negative margins, display block, etc). But I am not having any luck. I don't totally understand shape-outside, but I get the feeling it forces the shape on a line by line basis, completely ignoring blocks.

I'd like to avoid absolutely positing the items with a static pixel value. I am hoping to solve this programmatically rather than setting each value manually. I'd prefer to use just CSS, if possible. 

Any brilliant ideas?