Как выровнять и отрегулировать тексты span из списков по вертикали?

Если у вас уже есть список элементов с различными значениями в метрах и километрах, вы можете использовать CSS для выравнивания и отображения значений вертикально. 

Вот пример кода, который поможет вам достичь желаемого результата:

HTML:
```html
<ul class="list">
  <li>
    <span>500 м</span>
    <span>1 км</span>
  </li>
  <li>
    <span>250 м</span>
    <span>2 км</span>
  </li>
  <li>
    <span>750 м</span>
    <span>3 км</span>
  </li>
</ul>
```

CSS:
```css
.list {
  display: flex;
}

.list li {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.list li span {
  white-space: nowrap;
  margin-bottom: 5px;
}
```

В данном примере мы используем Flexbox для выравнивания элементов списка вертикально. Каждый элемент списка (`li`) имеет направление столбцов (`flex-direction: column`) и выравнивание содержимого в конце строки (`align-items: flex-end`). Таким образом, значения метров и километров отображаются вертикально и выровнены в конце. Мы также добавили `white-space: nowrap` и `margin-bottom` для спанов, чтобы установить правильный отступ между значениями. 

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