How to vertically align the list-index of a list with flexbox?

Question

I needed to create a list with a custom list-index which is vertically centered to the content of the list items.

As I am using flex already I thought the easiest might be to give the list-item a display:flex; and style it. This works, but as soon, as the list-item contains other elements it is messed up. As you can see in the example below.

Whats the best way to vertically center the list-index?

-- Updated Example --

ol {
  list-style: none;
  padding: 0;
  width: 200px;
}

ol > li {
  display: flex;
  margin-top: 20px;
  align-items: center;
}

ol > li:before {
  color: red;
  content: attr(data-count)' ›';
  flex display: block;
  flex-shrink: 0;
  text-align: right;
  min-width: 24px;
  padding-right: 5px;
}

<ol>
  <li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  <li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li>
  <li data-count="999">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ol>

Answer 1

I think that the best option is to wrap all elements inside li in one other element and that should fix the problem.

ul {
  list-style: none;
  padding: 0;
  width: 200px;
}
ul > li {
  display: flex;
  margin-top: 20px;
  align-items: center;
}
ul > li:before {
  color: red;
  content: '›';
  flex display: block;
  flex-shrink: 0;
  text-align: center;
  width: 30px;
}

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  <li>
    <p>Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</p>
  </li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ul>