HTML: выравнивание индикаторов по вертикали

Question

У меня есть список элементов с индикатором выполнения каждый:

Я хочу, чтобы все индикаторы выполнения были выровнены, независимо от длины текста слеваявляется.(Я уже знаю, как долго будет самый длинный текст слева)
Фрагмент кода (в Django):

<strong style="font-family:Arial">{{ score.0 }}</strong>
<progress value="{{ score.1 }}" max="10" style="margin-left: 5%"></progress>

style="margin-left: 5%" не работает, потому что он относится к соответствующему тексту.Я уже пытался использовать варианты с вертикальным выравниванием, но ничего не получалось.

Answer 1

Здесь вы используете flex:

section {
  font-family: sans-serif;
  display: flex;
  flex-wrap: wrap;
}

strong, progress {
  flex-basis: 50%
}

<section>
  <strong>text</strong>
  <progress value="1" max="10"></progress>
  <br>
  <strong>longer text</strong>
  <progress value="1" max="10"></progress>
  <br>
  <strong>even longer text</strong>
  <progress value="1" max="10"></progress>
</section>

Answer 2

Это зависит от того, как вы хотите приблизиться к нему, один из способов будет дать всем текстам одинаковую длину с помощью css, например:

<strong style="width:200px;">text goes here</strong>
<progress></progress>

Другой способ - это иметь оба<strong> и <progress> внутри контейнера, своего рода обертка, а затем задайте этому контейнеру несколько гибких правил, чтобы заставить оба элемента перейти к противоположным концам, например:

<div class="container">
<strong>text</strong>
<progress></progress>
</div><!-- .container -->

and for the css

.container {
display:flex;
width:100%;
flex-direction:row;
justify-content:space-between;
align-items:center;
}

strong {width:200px;} // or 50%;
progress (width:200px;} //or 50% or whatever you need

Answer 3

Может быть достигнуто двумя строчками CSS.

И, приведенный ниже пример структуры HTML FYR.

strong{
  display: inline-block;
  min-width: 250px;
}

<strong style="font-family:Arial">Text</strong>
<progress value="3" max="10" style="margin-left: 5%"></progress>
<strong style="font-family:Arial">Longer Text</strong>
<progress value="3" max="10" style="margin-left: 5%"></progress>
<strong style="font-family:Arial">Even Longer Text</strong>
<progress value="3" max="10" style="margin-left: 5%"></progress>