I'm trying to make a simple typing test application using HTML, CSS and JS. I want to display some placeholder text in the box the user is typing in so that they know exactly what to type as they are typing it. If they mess up, it will become apparent because the placeholder text and input text wont line up. I've spent more than a few hours trying to figure this out and have come up with two sub-par solutions:
HTML:

```
    <div id='test' class="placeholder" data-value="This appears in the box!">
    <textarea id="typed" name="typed" cols=50 rows=15></div>

```

CSS:

```
    .placeholder
    {
        position: relative;
    }

    .placeholder::after
    {
        position: absolute;
        left: 2px;
        top: 2px;
        content: attr(data-value);
        pointer-events: none;
        opacity: 0.6;
        text-align: left;
    }

```

This works fairly well, but unfortunately, any newline characters are completely ignored, displayed as a space, or displayed literally. I've tried \u000A, \x0A, \r\n, just pressing enter, it doesn't work.

Option two is using the placeholder attribute:

```
    <textarea placeholder="line1
    line2" id="typed" name="typed" cols=50 rows=15></textarea>

```

This displays correctly but as soon as you start typing, it disappears.

Does anyone know of a way to make the standard placeholder text stay permanently, or have some other workaround that formats correctly?