Below is a picture of some text divided into columns and rows. Importantly, rows span across the vertical dividing line even though the text is not allowed to cross this boundary. I'd like to try to produce something like this in a HTML page.
To describe how this is typically drawn, there are always two columns that take up approximately the width of the screen. Each row has a block of text in the left and one in the right, and has a bounding box that spans across the two columns.
But because there are these "subproofs" (in the picture, this is lines 2 through 4) this cannot be accomplished by just a table. (Or if it can, I'm not familiar with the ability of tables to do this.) A subproof is an extra bounding box that spans a collection of rows, giving it added indentation on those rows, and an extra border.
I've tried simulating this with tables, grids, flexboxes, but I haven't found a way to create something like this. Tables don't seem to have the ability to make "subtables" like this, where certain rows and columns are specified to give extra border lines and indentation. Grids and flexboxes don't seem to allow overlapping boxes such that the text does not cross the boundaries. Of course I could be wrong about all of that, and I'd be happy to be corrected. Thanks!