Почему содержимое моих столбцов начинается с разной высоты?

Question

Я прочитал, что не следует использовать таблицы в качестве средства разметки, а выполнять стилизацию с помощью CSS, поэтому я попробовал основную вещь, которую я могу придумать, - имитировать таблицы, используя CSSмакет столбца.

Я создал CodePen для иллюстрации проблемы.Как видите, содержимое двух столбцов начинается с разной высоты, и я не понимаю, почему.

.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>

Я хотел дать обновление на этот пост на случай, если кто-то наткнется на него.1) Отмеченный ответ является улучшением по сравнению с моим, но я все еще нахожу его неинтуитивным, поскольку он использует гибкий поток по умолчанию, который помещает основную ось в горизонтальное положение.
То, как это должно быть с логической точки зрения, будет столбцами,

Поэтому вот обновленное решение, которое является наиболее простым и интуитивно понятным (по крайней мере, на мой взгляд):

.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

РЕДАКТИРОВАТЬ Если вы хотите использовать код, который у вас уже есть.Удалите поле из тега абзаца "p", установленного в браузере.затем установите высоту строки на желаемую высоту.
ОРИГИНАЛЬНЫЙ ответ
Вы захотите использовать что-то вроде flexbox, если хотите легко выстроить свои позиции в ряд.Вы также можете установить высоту строки, чтобы обеспечить правильное выравнивание значков Юникода и выравнивания текста
Это позволит вам полностью контролировать расположение текста и значков. Подробнее о flexbox в W3schools

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

Пример Flex Box:

.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>

Но вам может быть лучше пересмотреть свой HTML-код, как это предлагал кто-то другой, и включить его в список, так как это будет более семантически правильно и проще в обслуживании

  <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

Ваша проблема в том, что поля на элементах p сворачиваются, как если бы элементы div были сложены вертикально. См. Ответ Йоханнеса .

Однако ваша концепция ошибочна.Вы, вероятно, хотите связать рейтинг со скиллом

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

Вы можете добавить padding: 1px 0 к двум контейнерам .align-left и .align-right.Таким образом, верхние и нижние поля по умолчанию для тегов p остаются внутри их контейнеров, не вызывая вертикального смещения из-за сужающихся полей, как в вашем коде.

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