Estou tentando formatar html para ter texto formatado por 2 colunas. Estou tentando fazer da seguinte forma:
.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>
Mas quando abro este arquivo no navegador, vejo que o texto está dividido em 2 colunas, mas as linhas entre 2 colunas não estão alinhadas verticalmente (como pode ser visto na captura de tela): . O que preciso fazer - é que a linha #1 na linha #4 na página de amostra estará na mesma altura. Tentei usar flex, mas isso faz com que o texto seja dividido em mais de 2 colunas. O que está faltando no estilo? Obrigado antecipadamente