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