Two column text in html is not aligned correct

Question

I am trying to format html to have text formatted by 2 columns. I am trying to do it as following :

.content {
    column-count: 2;
    column-gap: 10px; /* Space between the columns */
}
body {
  counter-reset: section;      
}
p:before {
  counter-increment: section;        
  content: "" counter(section) ": "; 
}

<div class="content"> 
  <p>this is the first paragraph of text.</p>
  <p>this is the second paragraph of text.</p>
  <p>this is the third paragraph of text.</p>
  <p>this is the fourth paragraph of text.</p>
  <p>this is the fifth paragraph of text.</p>
  <p>this is the sixth paragraph of text.</p>
</div>

But when I open this file in browser I see that text is splitted in 2 columns but lines between 2 columns are not aligned verticcally (as it can be seen in screenshot): . What I need to do - is that line #1 in line#4 on the sample page will be on same height. Tried to use flex but it causes to that text is splitted by more than 2 columns . What is missing in the stying ? Thanks in advance

Answer 1

Remove the default margin-top of the paragraph elements:

p {
  margin-top: 0;
}

.content {
  column-count: 2;
  column-gap: 10px;
  /* Space between the columns */
}

body {
  counter-reset: section;
}

p:before {
  counter-increment: section;
  content: "" counter(section) ": ";
}

<div class="content">
  <p>this is the first paragraph of text.</p>
  <p>this is the second paragraph of text.</p>
  <p>this is the third paragraph of text.</p>
  <p>this is the fourth paragraph of text.</p>
  <p>this is the fifth paragraph of text.</p>
  <p>this is the sixth paragraph of text.</p>
</div>