Align a `<span>` in the vertical center of a `<li>` without changing the rest of the text

Question

I have an unordered list that needs to stay the same format, because it is a side menu mounted dynamically. Something like this:

<ul>
  <li>
    <a> Link 1 <span> Algum texto </span> </a>
  </li>
  <li>
    <a> Link 2 </a>
  </li>
  <li>
    <a> Link 3 </a>
  </li>
</ul>

That one <span> which lies within the <li> should remain vertically aligned, even when the text of the link is too large and needs to occupy two lines or more. More or less like this:

So, so far I have not succeeded. I can verticalize the <span> in certain situations, but not in all.

Could someone give me a hand?

Answer 1

My original solution was wrong, I did not read that the goal was to centralize the span vertically. In this case the solution is to make the li is displayed as table, and that both the span as to the link are displayed as table-cell. Cells can be centered vertically with vertical-align: middle

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
li {
    padding: 0 15px 10px;
    display: table;    
}
li a {
    color: blue;
    width: 150px;
    display: table-cell;
    text-decoration: none;
}
.options {
    color: red;
    width: 50px;
    padding-left: 35px;
    display: table-cell;
    vertical-align: middle;
}

Functional example