OK, I was confused since the example uses a bunch of <div>s, but why not. Still, my issue is not positioning elements, but styling a <li>'s “immediate” text separately from the other lists nested inside, hence the need (in my mind) for the extra span: <ol><li><span>Level title</span><ul>…</ul></li>, where Hugo only produces <ol><li>Level title<ul>…</ul></li>
My prototype from the screenshot above uses flex boxes and works perfectly with only this extra markup. If CSS grids or anything could render this with the only markup Hugo generates, I’m interested in an example, because I really can’t think of a way to achieve this.