When appending a <details> element to a div with innerHTML the div goes “down” too

Question

The problem is easily pictured with an example here .

The code goes like this:

HTML:

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

JS:

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

The problem is that when I click on "World", "Something" appears but "Hello" also goes down, like this:

I would like that when you click on "World", "Hello" stays in position.

Any suggestions? Thanks in advance!

Answer 1

Setting vertical-align: top for #example seems to get the layout that I think you want. The HTML:

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

And the CSS:

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

And, finally, the obligatory fiddle: http://jsfiddle.net/ambiguous/cJPRz/