Выравнивание текста в CSS не работает должным образом в сочетании с flex

Question

У меня есть вертикальная панель навигации, например, где я хочу, чтобы элемент «.line» сдвигал текстовый элемент «a» влево по мере роста элемента .line. Однако увеличение только одной из строк сдвигает все тексты на одинаковую величину влево, по существу перемещая всю панель навигации. Я думаю, что это может иметь какое-то отношение к выравниванию текста, которое я пытаюсь сохранить для форматирования. Я приложил соответствующий код, воссоздающий описанную ситуацию, пожалуйста, посмотрите.

nav {
  -webkit-transform: translateY(22vh);
  -ms-transform: translateY(22vh);
  transform: translateY(22vh);
  position: fixed;
  right: 0;
  overflow-x: hidden;
  z-index: 1000 !important;
  opacity: 1;
  margin: 10px 0 10px 10px;
}

nav div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 20px 0;
}

nav div a {
  display: inline-block;
  margin-right: 10px;
  color: black;
  font-size: 18px;
  text-decoration: none;
}

nav div .line {
  display: block;
  margin: 0px;
  width: 0px;
  height: 1.5px;
  float: right;
  background-color: black;
  opacity: 0;
}

nav div #tab-2 .line {
  width: 80px;
  opacity: 1;
}

<nav>
  <div id="tab-1">
    <a href="#">About</a>
    <div class="line"></div>
  </div>
  <div id="tab-2">
    <a href="#">About</a>
    <div class="line"></div>
  </div>
  <div id="tab-3">
    <a href="#">About</a>
    <div class="line"></div>
  </div>
</nav>

До сих пор я пытался делать такие вещи, как ручное увеличение размера контейнера div # # tab- # при одновременном увеличении ширины строки, сохраняя максимальную ширину для остальных строк, но это не работал.

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

Answer 1

Один из вариантов:

nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

Обновление

Вы можете попробовать следующее:

nav {
  -webkit-transform: translateY(22vh);
  -ms-transform: translateY(22vh);
  transform: translateY(22vh);
  position: fixed;
  right: 0;
  overflow-x: hidden;
  z-index: 1000 !important;
  opacity: 1;
  margin: 10px 0 10px 10px;
}

nav div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 20px 0;
}

nav div a {
  display: inline-block;
  margin-right: 10px;
  color: black;
  font-size: 18px;
  text-decoration: none;
}

nav div .line {
  display: block;
  margin: 0px;
  width: 0px;
  height: 1.5px;
  float: right;
  background-color: black;
  opacity: 0;
}

nav div#tab-2 .line {
  width: 80px;
  opacity: 1;
}

nav div {
  position: relative;
  width: 150px;
}
nav div a {
  position: absolute;
  right: 40px;
}
nav div#tab-2 a {
  position: relative;
  right: 0;
}

<nav>
  <div id="tab-1">
    <a href="#">About</a>
    <div class="line"></div>
  </div>
  <div id="tab-2">
    <a href="#">About</a>
    <div class="line"></div>
  </div>
  <div id="tab-3">
    <a href="#">About</a>
    <div class="line"></div>
  </div>
</nav>

Или с эффектом наведения (должен быть улучшен, но дает идею):

nav {
  -webkit-transform: translateY(22vh);
  -ms-transform: translateY(22vh);
  transform: translateY(22vh);
  position: fixed;
  right: 0;
  overflow-x: hidden;
  z-index: 1000 !important;
  opacity: 1;
  margin: 10px 0 10px 10px;
}

nav div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 20px 0;
}

nav div a {
  display: inline-block;
  margin-right: 10px;
  color: black;
  font-size: 18px;
  text-decoration: none;
}

nav div .line {
  display: block;
  margin: 0px;
  width: 0px;
  height: 1.5px;
  float: right;
  background-color: black;
  opacity: 0;
}

nav div {
  position: relative;
  width: 150px;
}
nav div a {
  position: absolute;
  right: 40px;
}
nav div:hover a {
  position: relative;
  right: 0;
}
nav div .line {
  width: 0;
  opacity: 0;
}
nav div:hover .line {
  width: 80px;
  opacity: 1;
}

<nav>
  <div id="tab-1">
    <a href="#">About</a>
    <div class="line"></div>
  </div>
  <div id="tab-2">
    <a href="#">About</a>
    <div class="line"></div>
  </div>
  <div id="tab-3">
    <a href="#">About</a>
    <div class="line"></div>
  </div>
</nav>