I have worked out a method to achieve what I want. I am using two divs, the first one is my data entry div which can be setup to best allow entry and scale to the appropriate device.

The second div is a hidden div (display='none') which is basically just a table so I can align data nicely and create a neat and tidy pdf.

        <div id="contentsheet2" class="contentgrid" style="display:none">

Then when the download PDF button is clicked, I locate the hidden div, populate its cells with data from the input elements and generate a PDF.

            function generatePDF() {
            const compname = document.getElementById('compname').value;
            const hiddenDiv = document.getElementById('contentsheet2').innerHTML;
            var opt = {
                  margin: [4, 0, 4, 0], //top, left, bottom, right
                  filename: 'FREEProgram.pdf',
                  image: { type: 'jpeg', quality: 0.95 },
                  html2canvas: {
                    dpi: 300,
                    scale:2,
                    letterRendering: true,
                    useCORS: true,
                    scrollX: 0, 
                    scrollY: 0
                  },
                  jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
                };              // Choose the element and save the PDF for your user.
            opt.filename = 'FREEProgramContentSheet-' + compname + '.pdf';
            html2pdf().set(opt).from(hiddenDiv).save();
        }

The gives me the ability to have both layouts independent of each other and make the user experience better whilst still getting a neatly generated PDF. The PDF is nicer than I had before because it doesn't have the constraints applied by the input elements.