El comportamiento predeterminado de la tecla <kbd>ENTER</kbd> es crear un nuevo elemento HTML (que es justamente ese `div`), y lo podemos evitar con [**`preventDefault()`**][1].

---

Entonces, puedes agregar un listener, le indico que al hacer `keydown` escuche el evento, y lo que hace el evento es capturar a la tecla <kbd>ENTER</kbd> y le quitamos el evento que trae por defecto. Luego de esto, lo podemos concatenar con `<br>` para hacer los saltos de línea:

    p.addEventListener("keydown", function (e) {
      if (e.key === "Enter") {
        e.preventDefault();
        p.innerHTML = p.innerHTML + "<br><br>"; // le agrego 2 para notar más el cambio.
      }
    });

---

### Veamos lo que sucede.

Comentaré la línea de código que remueve el `outline` del `p`, para poder ver bien cómo se hace los saltos de línea:

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

    let span = document.getElementById("span");
    let p = document.createElement('p');
    document.body.appendChild(p);
    p.innerHTML="Text";
    p.style.position="absolute";
    p.style.margin="0";
    p.contentEditable="true";

    function input(){
      let s = getComputedStyle(p);
      span.style.width= parseFloat(s.width) + "px";
    }

    // quito el focus para ver los saltos de línea que ocurre.
    // p.addEventListener("focus", function(e){e.target.style.outline="none"});
    p.addEventListener("input", input);

    p.addEventListener("keydown", function (e) {
      if (e.key === "Enter") {
        e.preventDefault();
        p.innerHTML = p.innerHTML + "<br><br>";
      }
    });

<!-- language: lang-css -->

    #span {
      background: green;
      width: 100px;
      height: 10px;
      position: absolute;
    }

    p {
      font-size: 20px;
    }

<!-- language: lang-html -->

    <span id="span"></span>

<!-- end snippet -->

Como verás, los saltos de línea están ocurriendo, los `div` ya no se están generando, **pero** el cursor (para escribir) **se va al inicio**. Es un comportamiento muy extraño (que me ha sido de difícil entender), pero pienso que tiene que ver algo con el `keydown`.

---

Entonces, hay que encontrar la manera de que el cursor para escribir se posicione al final, ya que el final **es ese salto de línea que hicimos, y ahí es donde nos queremos ubicar para continuar escribiendo**.

Una forma de hacerlo sería:

- *Seleccionar el texto.*
- *Posicionar el cursor de escritura al final.*
- *Remover la selección del texto.*

Y esto es posible hacerlo, utilizando al objeto [**range**][2].

### Lógica de selección:

El objeto `Range` es utilizado para representar una selección en el documento `HTML`, que es justamente lo que necesitamos.

Entonces, inicializamos al rango y otra variable para obtener todas las selecciones en el documento:

    const rango = document.createRange(); // Inicializamos un rango.
    const seleccionar = window.getSelection(); // Inicializo la selección.

Luego seleccionamos a todo el `p`:

    rango.selectNodeContents(p);

Y ubico la posición del cursor al final:

    rango.collapse(false);

Ahora remuevo todas las selecciones del documento:

    seleccionar.removeAllRanges();

Y por último agrego el rango al elemento `p`:

    seleccionar.addRange(rango);

Y con esto ya lo tendrías, simplemente seleccionamos, ubicamos el cursor al final (al salto de línea echo) y quitamos la selección.

---

El código final vendría a ser el siguiente (doy una mejor explicación en los comentarios):

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    let span = document.getElementById("span");
    let p = document.createElement('p');
    document.body.appendChild(p);
    p.innerHTML="Text";
    p.style.position="absolute";
    p.style.margin="0";
    p.contentEditable="true";

    function input(){
      let s = getComputedStyle(p);
      span.style.width= parseFloat(s.width) + "px";
    }

    // quito el focus para ver los saltos de línea que ocurre.
    // p.addEventListener("focus", function(e){e.target.style.outline="none"});
    p.addEventListener("input", input);

    p.addEventListener("keydown", function (e) {
      if (e.key === "Enter") {
        e.preventDefault();
        p.innerHTML = p.innerHTML + "<br><br>";

        const rango = document.createRange(); // Inicializamos un rango.
        const seleccionar = window.getSelection(); // Inicializo la selección.
        
        // Indicamos qué va a hacer el rango.
        rango.selectNodeContents(p); // Primero, le digo que seleccione todo el texto.
        rango.collapse(false); // Luego, posiciono el cursor de escribir al final, ya que "false" es al final y "true" es al inicio.
        
        // Hasta aquí, el texto está seleccionado y el cursor está al final del todo.
        
        // Entonces, remuevo todas las selecciones que hay en el documento (removiendo también la selección del "p").
        seleccionar.removeAllRanges();
        // Y por último, ejecuto el rango con las indicaciones que le dí (el de selecciona al "p" y ubicando el cursor al final).
        seleccionar.addRange(rango);
      }
    });

<!-- language: lang-css -->

    #span {
      background: green;
      width: 100px;
      height: 10px;
      position: absolute;
    }

    p {
      font-size: 20px;
    }

<!-- language: lang-html -->

    <span id="span"></span>

<!-- end snippet -->

  [1]: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
  [2]: https://developer.mozilla.org/es/docs/Web/API/Range