Two column layout with new line breaks

Question

I'm trying out a multi-column magazine style layout for an editorial project.

As monitor sizes continue to increase, I wanted to take advantage of all the available inches of the monitor by creating a layout very similar to a paper magazine (two to three columns per page).

I'm using TipTap Editor for post management (since it returns very clean HTML code), and on the frontend I get the following html output:

I use the css columns class to divide the article into two parts:

article {
       columns: 2;
    }

But the result is this:

I want to divide all h2 into solution paragraphs so that I can expand the chapters horizontally, like this:

Is it possible to intercept H2 using pseudo-classes?

Answer 1

It might be helpful to put each chapter in a div so they stack together like your desired result.

HTML

  

    
Chapter 1
    
 1.1 - The First
    
...
    
...
    
 1.2 - The Second
    
...
    
 1.3 - The Third
    
...
  
  

    
Chapter 2
    
 2.1 - The First
    
...
  

CSS

.block {
  column-count:2;
  column-gap: 30px;
  margin: 20px 0 50px 0;
}

h2 {
  margin-top: 0;
}

Codepen: https://codepen.io/halfandhalfhd/pen/PoamByX