[SOLVED] How to insert <details> in one line with a sentence

How to insert <details> in one line with a sentence

I have few sentences. In end of first sentence (in this line), I want add the spoiler which will be keep other part of story. I am try do it, but when clicked on the More.. - my text jumping to the next line. I need continue text in one line with More... Please do not tell me about any scripts, I want use HTML + CSS only. Thanks.

details {
  display: inline-block;
}
summary {
  display: inline-block;
}

<blockquote>
  There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
  <details>
    <summary>
      More..
    </summary>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </details>
</blockquote>

Solution

1) Make all of your copy elements display 'inline', rather than inline-blocks (so they work like spans rather than divs)

2) Hide the summary element 'More..' when the details are opened, by setting its display to none.

Code follows:

blockquote {
  display: inline;
} 
 
details {
  display: inline;
}

summary {
  display: inline;
}

details[open] summary {
  display: none;
}

<blockquote>
  There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
  <details>
    <summary>
      More..
    </summary>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </details>
</blockquote>