This runs nice and fast.
Out of interest, why did you use display: flex; on the li's and add the list number inside div's?
Out of interest, why did you use display: flex; on the li's and add the list number inside div's?
The browser's implementation of numbering ol's is to align them to the right and render them hanging. They don't impact the layout, much like position: absolute, and they grow to the left.
The default ol/ul behaviour leaves some space to the left where the bullets/numbers should fit. This means you need to take into account the maximum width of the number.
I had no idea how much is the limit of the API, could have been thousands of items, and I didn't want to leave space for four digits until you scroll down to item #1234
I could also have implemented this using CSS `counter-increment` and `content`, but this was a better approach for debugging if the articles were rendering in the right order, while the CSS approach only takes into consideration the amount of DOM nodes.
I think I would have preferred other html elements over the div even with flexbox css, but it's good to hear your reasoning over this.