Alternating line-break for two div-containers in CSS

Question

If I have some text in a div-container I‘ll get an automatic line-break depending on the size of the container. I would like to have this automatic line-break for two div-containers but in alternating order. On the picture you can see what I would like to get according to the html-code. I do not focus on the alternating colour. I marked the background coloured that it is better understandable what I'm looking for.

As I want to have it for very long and different content, I don’t want to do it by hand with many containers. Another problem would be the inflexibility when I do it this way. I want it to work with a flexible surrounding container size.

Is there a way to implement that with CSS or in any other way?

<div id="surrounding_container">
  <div id="box1">
     Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi doloum ..  
  </div>
  <div id="box2">
    3.1415926535 8979323846 2643383279 5028841971 69399375105820974944 5923078164 0628620899 …     
  </div>
</div>

I am trying to explain the problem in more detail.

Answer 1

There's probably a ton of edge cases that need to be tested here, but here's one approach. Use 2 <p> tags with line-heights about 2x their normal value. Position the 2nd <p> absolutely so it's positioned within the space between the lines of 1st <p>. As the lines of each <p> wrap they will be offset from each other.

One of the obvious edge cases is when the text of the 2 <p> tags is drastically different - the longer <p> will have lots of extra lines of widely-spaced text. So this really only works when the 2 <p> elements have similar lengths of text.

html {
  font-size: 16px;
}

div {
  position: relative;
}

p {
  font-size: 1rem;
  line-height: 3rem;
  padding: 0;
  margin: 0;
  color: red;
}

p:nth-child(2) {
  position: absolute;
  top: 1.5rem;
  color: blue;
}

<div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>