How do you have document.write result to drawing the same square size but with different calculated metrics?

I am creating a picture matting calculator which you can find the code on JSFiddle here.

The output I am trying to achieve is a large picture frame (a square) that’s always the same size, and that the results of:

Width: document.write((1/2)*(hf-hp+o));
Height: document.write((1/2)*(wf-wp+o));

…are placed in the appropriate location of the width & height of the square.

For example, if I enter the following information into my calculator on JSFiddle:

The output should be:

Width = 1.625 or 1 5/8
Height = 2.625 or 2 5/8

Therefore, the output should look like this:

Here is another JSFiddle of what I’ve attempted to do. I replaced my document.write((1/2)*(hf-hp+o)); with document.write(6 + 7); in order to show how I want it displayed. I need help with how to incorporate this JSFiddle code with this JSFiddle code. I’m not sure if this is even the correct approach.

Currently, my calculator’s output look like this with the above input example: 1.6252.625. This is correct, but both answers are bunched together: 1.625 and 2.625.