Como mencionado nos comentários você deve substituir o elemento [`<div>`][1], dentro dos parágrafos [`<p>`][2], por um elemento [`<span>`][3] que é um container genérico **em linha** para conteúdo fraseado.  

Mas o por que disso?

Na documentação sobre o [Modelo de Conteúdo HTML5][4] especifica o elemento `<p>` como sendo um [elemento fraseado][5]: 


> 3.2.5.2.5 Conteúdo do fraseado 
>
>O conteúdo fraseado é o texto do documento, bem como os elementos que marcam esse texto a nível
> intra-parágrafo. Uma sequencia de conteúdo fraseado que forma um bloco de texto é um
> parágrafo.
> 
> A maioria dos elementos que são categorizados como conteúdo de frases
> só podem conter apenas elementos que são categorizados como conteúdo
> de frases, e não qualquer conteúdo de fluxo.

Já o elemento `<div>` está classificado como um [elemento de fluxo][6] o que o impede de ser utilizado dentro do elemento `<p>` pois como mostrado acima *elementos que são categorizados como conteúdo de frases não podem conter um conteúdo de fluxo qualquer, apenas conteúdo de texto*.


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

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

    var casa = {
      quartos: 3,
      cores: ['branca', 'cinza'],
      janelas: true,
    };
    //Adiciona uma propriedade ao objeto
    casa.cores[2] = 'verde';

    //Modifica a mensagem true por uma outra
    if (casa.janelas = true) {
      casa.janelas = 'tem janelas';
    }

    //Pega a quantidade de quartos da casa
    var numQuartos = document.getElementById('quartosNumero');
    numQuartos.textContent = casa.quartos;

    //Pega as cores existentes na casa
    var numCores = document.getElementById('coresCasa');
    numCores.textContent = casa.cores;

    //Exibe se tem janelas
    var bolJanela = document.getElementById('temJanela');
    bolJanela.textContent = casa.janelas;

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

    <!DOCTYPE html>
    <html lang="pt">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" type="text/css" href="index.css">
      <title>Começando com javascript</title>
    </head>

    <body>
      <h1>Esta é a casa</h1>
      <p >Quantidade de quartos:
        <span id="quartosNumero"></span>
      </p>
      <p>Cores presentes:
        <span id="coresCasa"></span>
      </p>
      <p>Extra:
        <span id="temJanela"></span>
      </p>
      <!--script src="ex1.js"></script-->
    </body>

    </html>

<!-- end snippet -->

Outra abordagem, respeitando as normas citadas acima, seria separar os elementos de fluxo dos elementos fraseados e aplica um estilo aos elementos <p> e <div> modificando a propriedade [`display`][7] que irá especificar o tipo de caixa de renderização desses elementos.

No caso será utilizado a o `display: inline-block` que segundo essa [resposta de Renato Dinhani][8] e essa [resposta de splattne][9]:

> `inline-block` é a junção dos comportamentos `inline` (ex.:ocupar
> apenas o espaço do conteúdo, não quebrar linha) e `block` (ex.:
> dimensões configuráveis) em um único elemento HTML. Elementos com
> `display:inline-block`são como elementos `display:inline`, mas eles
> podem ter uma largura e uma altura . Isso significa que você pode usar
> um elemento de bloco embutido como um bloco enquanto o flui dentro de
> texto ou outros elementos.

* No caso tanto as propriedades [`margin`][10], [`padding`][11], [`height`][12] e [`width`][13] não serão introduzidas na folha de estilo e usarão o valor default de cada navegador pois não são o foco.




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

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

    var casa = {
      quartos: 3,
      cores: ['branca', 'cinza'],
      janelas: true,
    };
    //Adiciona uma propriedade ao objeto
    casa.cores[2] = 'verde';

    //Modifica a mensagem true por uma outra
    if (casa.janelas = true) {
      casa.janelas = 'tem janelas';
    }

    //Pega a quantidade de quartos da casa
    var numQuartos = document.getElementById('quartosNumero');
    numQuartos.textContent = casa.quartos;

    //Pega as cores existentes na casa
    var numCores = document.getElementById('coresCasa');
    numCores.textContent = casa.cores;

    //Exibe se tem janelas
    var bolJanela = document.getElementById('temJanela');
    bolJanela.textContent = casa.janelas;

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

    p,
    div {
      display: inline-block;
    }

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

    <!DOCTYPE html>
    <html lang="pt">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" type="text/css" href="index.css">
      <title>Começando com javascript</title>
    </head>

    <body>
      <h1>Esta é a casa</h1>
      <p>Quantidade de quartos:</p> <!-- Aqui há uma clara distinção entre elementos de fluxo e fraseados -->
      <div id="quartosNumero"></div>
      <br>   <!-- Uma quebra de linha é introduzida para fazer a separação-->
      <p>Cores presentes:</p>
      <div id="coresCasa"></div>
      <br>
      <p>Extra:</p>
      <div id="temJanela"></div>
      <br>
      <!--script src="ex1.js"></script-->
    </body>

    </html>

<!-- end snippet -->


  [1]: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/div
  [2]: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/p
  [3]: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/span
  [4]: https://html.spec.whatwg.org/multipage/dom.html
  [5]: https://html.spec.whatwg.org/multipage/dom.html#phrasing-content
  [6]: https://html.spec.whatwg.org/multipage/dom.html#flow-content
  [7]: https://developer.mozilla.org/pt-BR/docs/Web/CSS/display
  [8]: https://pt.stackoverflow.com/questions/66393/qual-a-diferen%C3%A7a-entre-displayinline-block-e-floatleft
  [9]: https://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block
  [10]: https://developer.mozilla.org/pt-BR/docs/Web/CSS/margin
  [11]: https://developer.mozilla.org/pt-BR/docs/Web/CSS/padding
  [12]: https://developer.mozilla.org/pt-BR/docs/Web/CSS/height
  [13]: https://developer.mozilla.org/pt-BR/docs/Web/CSS/width