CSS text align not working as expected when combined with flex - html

Question

I have a vertical navigation bar like so where I want the '.line' element to push the 'a' text element to the left as the '.line' element grows. However, growing just one of the lines pushes all the texts by the same amount to the left, essentially moving the entire navigation bar. I think it might have something to do with text-align, which I am trying to keep for formatting. I have attached the relevant code recreating the situation described, please take a look.
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">
About
<div class="line"></div>
</div>
<div id="tab-2">
About
<div class="line"></div>
</div>
<div id="tab-3">
About
<div class="line"></div>
</div>
</nav>
So far, I've tried doing things like manually increasing the size of the '#tab-#' div container while increasing the width of the line, while keeping a max-width on the rest of the rows, but that did not work.
Here is a visual representation of what I want the end result to be

Answer 1

One of the options is:
nav {
display: flex;
flex-direction: column;
align-items: flex-end;
}
Update
You can try with the following:
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">
About
<div class="line"></div>
</div>
<div id="tab-2">
About
<div class="line"></div>
</div>
<div id="tab-3">
About
<div class="line"></div>
</div>
</nav>
Or, with hover effect (to be improved, but gives the idea):
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">
About
<div class="line"></div>
</div>
<div id="tab-2">
About
<div class="line"></div>
</div>
<div id="tab-3">
About
<div class="line"></div>
</div>
</nav>