При добавлении элемента <details>к элементу div с помощью innerHTML, элемент div также уменьшается

Question

Проблема легко описывается на примере здесь .

Код выглядит так:

HTML:

<div id="example">Hello </div>

JS:

document.getElementById('example').innerHTML += '<details style="display: inline"><summary>World</summary>Something</details>';

Проблема в том, что, когда я нажимаю «Мир», появляется «Нечто», но «Привет» также понижается, например:* Мне бы хотелось, чтобы при нажатии кнопки «Мир» «Привет» оставался на месте.

Есть предложения?Заранее спасибо!

Answer 1

Установка vertical-align: top для #example, кажется, дает макет, который, я думаю, вам нужен. HTML:

<div id="example">Hello <details><summary>World</summary>Something</details></div>

И CSS:

#example {
    vertical-align: top;
}
details {
    display: inline;
}

И, наконец, обязательная скрипка: http://jsfiddle.net/ambiguous/cJPRz/