Vertical alignment for columns of text when using the column-count css tag?

Question

I am using the CSS column-count tag to divide some text up into four columns on an HTML page.

The first column is vertically always a little bit lower than the other three.

I've boiled it down to the simplest possible example, which you can see below, or in this JSFiddle.

Why does the first column have extra space at the top? How do I get them to align?

.column-text{
  column-count: 4;
  column-gap: 10px;
  column-rule: 1px dotted #d5d5d5;
  font-size: large;
}

<div class="column-text">
  <div>
    <p>Why am I lower</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
</div>

Answer 1

There is a margin added at the first paragraph. you can remove it by adding this line to the CSS: .column-text div:first-child p:first-child { margin: 0; }

.column-text{
  column-count: 4;
  column-gap: 10px;
  column-rule: 1px dotted #d5d5d5;
  font-size: large;
}

.column-text div:first-child p:first-child {
  margin: 0;
}

<div class="column-text">
  <div>
    <p>Why am I lower</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
</div>