Nested child elements not displaying in JSON column formatting in Microsoft List in SharePoint Online - sharepoint-online

Question

I am trying to create a Status column which displays the progress of a multi stage approval flow.
This JSFiddle demonstrates how it should look:
I am now converting the HTML and CSS into the JSON required for column formatting.
All the conditional logic and colors are working, however it is not outputting the nested child elements.
The nested child elements (spans) are the 'arrows' at the end of each stage.
The column formatting therefore looks like this:
The associated HTML in browser developer tools console looks like this:
(you can see that the nested spans are not being output at all)
At first, I was wondering if nested children were allowed in JSON column formatting.
But I have seen other examples where people are using it (example), so that doesn't seem to be the issue.
Below is the JSON column formatting I am using.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"style":
{
"font-size": "16px"
},
"children":
[
{
"elmType": "div",
"txtContent": "Stage 01",
"style":
{
"float": "left",
"padding": "10px 30px 10px 40px",
"position": "relative",
"font-family": "Arial",
"background-color": "=if([$Stage1Person] == '', '#eee', '#aeffae')"
},
"children":
[
{
"elmType": "span",
"style":
{
"position": "absolute",
"top": "0",
"right": "-19px",
"width": "0",
"height": "0",
"border-top": "21px solid transparent",
"border-bottom": "20px solid transparent",
"z-index": "2",
"background-color": "=if([$Stage1Person] == '', '#eee', '#aeffae')"
}
}
]
},
{
"elmType": "div",
"txtContent": "Stage 02",
"style":
{
"float": "left",
"padding": "10px 30px 10px 40px",
"position": "relative",
"font-family": "Arial",
"background-color": "=if([$Stage2Person] == '', '#ffdcae', '#aeffae')"
},
"children":
[
{
"elmType": "span",
"style":
{
"position": "absolute",
"top": "0",
"right": "-19px",
"width": "0",
"height": "0",
"border-top": "21px solid transparent",
"border-bottom": "20px solid transparent",
"z-index": "2",
"background-color": "=if([$Stage2Person] == '', '#ffdcae', '#aeffae')"
}
}
]
},
{
"elmType": "div",
"txtContent": "Stage 03",
"style":
{
"float": "left",
"padding": "10px 30px 10px 40px",
"position": "relative",
"font-family": "Arial",
"background-color": "=if([$Stage3Person] == '', '#ffaeae', '#aeffae')"
},
"children":
[
{
"elmType": "span",
"style":
{
"position": "absolute",
"top": "0",
"right": "-19px",
"width": "0",
"height": "0",
"border-top": "21px solid transparent",
"border-bottom": "20px solid transparent",
"z-index": "2",
"background-color": "=if([$Stage3Person] == '', '#ffaeae', '#aeffae')"
}
}
]
}
]
}
Simplified JSON
Here is a more simplified version which also demonstrates how the nested CHILD elements are not being output as HTML:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"style":
{
"font-size": "16px"
},
"children":
[
{
"elmType": "div",
"txtContent": "Stage 01",
"style":
{
"float": "left",
"padding": "10px 30px 10px 40px",
"position": "relative",
"font-family": "Arial",
"background-color": "=if([$Stage1Person] == '', '#eee', '#aeffae')"
},
"children":
[
{
"elmType": "span",
"txtContent": "Stage 01 - CHILD"
}
]
},
{
"elmType": "div",
"txtContent": "Stage 02",
"style":
{
"float": "left",
"padding": "10px 30px 10px 40px",
"position": "relative",
"font-family": "Arial",
"background-color": "=if([$Stage2Person] == '', '#ffdcae', '#aeffae')"
},
"children":
[
{
"elmType": "span",
"txtContent": "Stage 02 - CHILD"
}
]
},
{
"elmType": "div",
"txtContent": "Stage 03",
"style":
{
"float": "left",
"padding": "10px 30px 10px 40px",
"position": "relative",
"font-family": "Arial",
"background-color": "=if([$Stage3Person] == '', '#ffaeae', '#aeffae')"
},
"children":
[
{
"elmType": "span",
"txtContent": "Stage 03 - CHILD"
}
]
}
]
}