How to get correct rendering size when printing html elements

Question

I have trouble understanding how to render html elements with correct size when printing them to A4 size paper.

To illustrate my purpose, I simplified my code to a html

Answer 1

You could use phantomjs to render your pdf (you ask for pdf eventually). In php I have successfully used https://github.com/kriansa/h2p to generate pdf's. (also with rendering javascript based charts with d3.js). It is not easy but with headless browsing you can make it work.