A feature of using PRE is not only that it uses a monospace font but that it preserves spaces and linebreaks.

Outside a PRE if you want to preserve spaces, and prevent line-breaks (which will vary with screen size) you need to use   (non-breaking space) for all space characters.

This is monospace - coded as my earlier posts. The second line has 3   between each vertical bar:

|...|...|...|...|...|...|...|...|...|...|...|...|...|...|...|...|...|...|
|   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |

On this screen the vertical bars line up, so here at least the   has the same width as the monospace dots.

HTH