Why are my columns' contents starting at different heights?

Question

I read that one should not use tables as means of layout, but do all the styling with CSS, so I tried the most basic thing I can think of to mimic tables, by using CSS multi-column layout.

I have created a CodePen to illustrate the problem. As you can see, the content of the two columns starts at different heights, and I do not understand why.

.skill-explanation {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  -ms-column-count: 2;
  column-count: 2;
}

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

<div class="skill-explanation">
  <div class="align-right">
    <p>&#9733;&#9734;&#9734;&#9734; &#8210; <br>
    &#9733;&#9733;&#9734;&#9734; &#8210; <br> 
    &#9733;&#9733;&#9733;&#9734; &#8210; <br> 
    &#9733;&#9733;&#9733;&#9733; &#8210;
   </p>
  </div>
  <div class="align-left">
    <p>I can put it into context and am able to use it's basics <br>
    intermediate knowledge, used several times <br>
    good undestanding, used frequently <br>
    deep understanding, used on a daily basis
    </p>
  </div>
</div>

I wanted to give an update on this post in case someone stumbles upon it. 1) The marked answer is an improvment over mine, but I still find it unintuitive, since it uses the default flex flow which puts the main axis on the horizontal.
The way this should be from a logical standpoint would be columns tho.

Therefore here is an updated solution, which is the most simple and intuitive (at least in my opinion):

.center-wrapper {
  margin: 0 auto;
  display:table;
}

.skill-explanation {
  list-style: none;
}

.rating {
}

.skill {
}

.skill-item {
  list-style: none;
}

<div class="center-wrapper" <ul class="skill-explanation">
  <li class="skill-item">
    <span class="rating">&#9733;&#9734;&#9734;&#9734; &#8210;</span>
    <span class="skill">I can put it into context and am able to use it's basics</span>
  </li>
  <li class="skill-item">
    <span class="rating">&#9733;&#9733;&#9734;&#9734; &#8210;</span>
    <span class="skill"></span>
    intermediate knowledge, used several times
  </li>
  <li class="skill-item">
    <span class="rating"> &#9733;&#9733;&#9733;&#9734; &#8210;</span>
    <span class="skill"></span>
    good undestanding, used frequently
  </li>

  <li class="skill-item">
    <span class="rating">&#9733;&#9733;&#9733;&#9733; &#8210;</span>
    <span class="skill"></span>
    deep understanding, used on a daily basis
  </li>
  </ul>
</div>

Answer 1

EDIT If you would like to use the code you already have. Remove the margin from the paragraph "p" tag that is set be the browser. then set the line height to your desired height.
ORIGINAL answer
You will want to use something like flexbox if you want to easily line you items up. You may also want to set the line height so that you can ensure your unicode icons and your text line up correctly
This will allow you to have full control over where the text and icons align. More info on flexbox at W3schools

p{
  margin: 0;
  line-height: 1.5em;
}

Flex Box example:

.skill-explanation {
  display: flex;
  align-items: center;
}
.align-left, .align-right {
  line-height: 1.5rem;
}

.skill-explanation {
  display: flex;
  align-items: center;
}
.align-left, .align-right {
  line-height: 1.5em;
}

<div class="skill-explanation">
          <div class="align-right">   
            <p>&#9733;&#9734;&#9734;&#9734; &#8210; <br>
              &#9733;&#9733;&#9734;&#9734; &#8210; <br>
              &#9733;&#9733;&#9733;&#9734; &#8210; <br>
              &#9733;&#9733;&#9733;&#9733; &#8210;</p>
          </div>
          <div class="align-left">
            <p>I can put it into context and am able to use it's basics <br>
              intermediate knowledge, used several times <br>
              good undestanding, used frequently <br>
              deep understanding, used on a daily basis</p>
          </div>
        </div>

But you may be better off revisiting your HTML code as someone else suggested and making it into a list as this would be more semantically correct and easier to maintain

  <ul>
    <li>&#9733;&#9734;&#9734;&#9734; &#8210; I can put it into context and am able to use it's basics</li>
    <li>&#9733;&#9733;&#9734;&#9734; &#8210; intermediate knowledge, used several times</li>
    <li>&#9733;&#9733;&#9733;&#9734; &#8210; good undestanding, used frequently</li>
    <li>&#9733;&#9733;&#9733;&#9733; &#8210; deep understanding, used on a daily basis</li>
  </ul>

Answer 2

Your problem is that the margins are collapsing on the p elements, as they would if the divs were stacked vertically. See Johannes answer.

Howevwer, your concept is flawed. You probably want to actually associate the rating with the skill

ul.skill-explanation {
  list-style: none;
  padding-left: 0;
}

.skill-item {
  display: flex;
}

.skill-item > div {
  width:50%;
}

.rating {padding-right: 0.5em; 
text-align:right;
}

<ul class="skill-explanation">
  <li class="skill-item">
    <div class="rating">&#9733;&#9734;&#9734;&#9734; &#8210;</div>
    <div class="skill">I can put it into context and am able to use it's basics</div>
  </li>
  <li class="skill-item">
    <div class="rating">&#9733;&#9733;&#9734;&#9734; &#8210;</div>
    <div class="skill">intermediate knowledge, used several times</div>
  </li>
  <li class="skill-item">
    <div class="rating">&#9733;&#9733;&#9733;&#9734; &#8210;</div>
    <div class="skill">good undestanding, used frequently</div>
  </li>

  <li class="skill-item">
    <div class="rating"> &#9733;&#9733;&#9733;&#9733; &#8210;</div>
    <div class="skill">deep understanding, used on a daily basis</div>
  </li>
</ul>

Answer 3

You can add padding: 1px 0 to the two containers .align-left and .align-right. That way the default top and bottom margins of the p tags stay inside their containers, not causing any vertical offset due to collapsing margins like in your codepen.

https://codepen.io/anon/pen/YBxWbY