Keeping line numbering in sync with wrapped lines

Question

I am trying to get long lines of code to wrap when using PrismJS, but the line numbers get out of sync.

I am wrapping the code using this style:

pre[class*="language-"].line-numbers > code {
    position: relative;
    white-space: pre-wrap;        /* This is the line I changed to make it wrap */
}

The HTML is:

<pre class="language-none line-numbers">
<code>Short first line.
But this is a very, very long second line indeed. It goes on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on this far.
This is the third and last line. It should have the number 3 beside it but does not.</code>
</pre>

I have created a complete Pen at https://codepen.io/mpoo/pen/RwayGBy?editors=1100

As you can see the line numbers simply don't match the lines of code.

Is it possible to make the line numbers match the lines in Prism or do they simply not support this?