The nonprofit demo about us page section that you've mentioned actually has a row which contains two columns. The right side column has feature box elements stacked on top of each other, and there are line element in between them.
In the line element if you go to the inline CSS option you will see that there is a margin with a minus value
50px -25px. That value actually causes the line to expand itself 25 pixels to the right and left, I need feels like that the whole line is connected to the vertical one.
That is a little bit of CSS trick to mimic the functionality of having nested columns. In the new version of the X theme which is 6.0.4, we have the feature of the nested columns and rows using the Global Blocks.
So, in this case, I suggest that you go to X > Global Blocks, and add a section which will sit on the right column of the page you are working on:
Then in the page itself add whatever you want in the left column and add the newly created Global Block in the right column using the global block element.