When you copy from the html reader (your browser), and paste into Word, it will paste in whatever normal font you use, which probably won't be monospaced. If you just highlight the whole thing and change it back to a monospaced font (Courier), it should look the same as in the post. Copy/paste to and from html sometimes inserts a space or two, and may change the line spacing, but these are usually pretty consistent and easily repaired in Word.
A little trickier:
If you want raised numbers on the chords, you can use the superscript tag.
Typed: G<sup>7</sup>
Should give you a G7
The problem is that the code (G<sup>7</sup>) for the chord takes more than the two spaces the chord will occupy when rendered by the html reader, so you have to "count spaces," and likely will need to preview, and adjust to get it right.
In Word, using Courier, type it out.
C G7 C G7
As I walked out in the streets of La-rado
Go back and put your insertion point between the G and the 7 and type <sup>.
Move the insertion point to after the 7 and type </sup>. Do not add or delete any spaces.
This will make it look really messy in Word
C G<sup>7</sup> C G<sup>7</sup>
As I walked out in the streets of La-rado
But when you paste it into a <pre> tag it should display on the web as:
C G7 C G7
As I walked out in the streets of La-rado
John