How can I arrange horizontal columns with fixed headings in front of each text block? The number of text blocks, as well as the amount of text in it is unknown in advance. The height and width of the container is fixed. Horizontal scrolling only
I use CSS properties Columns and display: inline-block .
I want to arrange as in this screenshot: 
So that if there is not enough space for the text, it is transferred to the next column, and the text following it will move.
But it turns out that the next block of text does not know that the previous one was spread over 2 columns and is superimposed directly on top of the text.
JsFiddle example
p { margin: 0; } .container { outline: 1px dotted gray; height: 200px; width: 400px; white-space: nowrap; overflow-x: auto; } .column { outline: 1px dotted green; display: inline-block; vertical-align: top; white-space: normal; column-width: 100vw; width: min-content; min-width: 50%; height: 100%; } .header { column-span: all; white-space: nowrap; } <div class="container"> <div class="column"> <h2 class="header">Lorem ipsum dolor sit..</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, dicta aut a at sunt quasi aspernatur. Ullam porro, consequatur est quo voluptatum atque. Delectus, dicta, saepe? Delectus sapiente officiis soluta maiores voluptatum voluptates culpa. Libero consectetur aliquid temporibus, dignissimos</p> </div> <div class="column"> <h2 class="header">Lorem</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, explicabo.</p> </div> <div class="column"> <h2 class="header">Lorem</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> </div> <div class="column"> <h2 class="header">Lorem</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> </div> </div> Any ideas?
