Adding pseudo-element between two elements - html

Question

I would like to insert a pseudo-element between two elements, in e.g.:
.general {
padding: 20px;
border: 1px solid #4a4a4a;
}
.left-subtitle {
float: left;
padding-right: 5px;
background-color: yellow;
}
.right-subtitle {
float: right;
padding-left: 5px;
background-color: red;
position: relative;
}
.right-subtitle:after {
content: '';
width: 100%;
height: 2px;
left: -100%;
bottom: 0;
background-color: blue;
position: absolute;
}
<div class="general">
<h3 class="title">Foo</h3>
<div class="subtitle">
<div class="left-subtitle">Text1</div>
<div class="right-subtitle">9.00 €</div>
</div>
</div>
How can I get the blue ::after to get the full width and being fully between yellow and red elements?
I tried to use display: flex; and justify-content: space-between;
.general {
padding: 20px;
border: 1px solid #4a4a4a;
}
.subtitle {
display: flex;
justify-content: space-between;
position: relative;
}
.subtitle:after {
content: '';
width: 80%;
left: 50%;
transform: translateX(-50%);
height: 2px;
background-color: blue;
position: absolute;
bottom: 0;
}
.left-subtitle {
padding-right: 5px;
background-color: yellow;
}
.right-subtitle {
padding-left: 5px;
background-color: red;
}
<div class="general">
<h3 class="title">Foo</h3>
<div class="subtitle">
<div class="left-subtitle">Text1 is longer, so doesn't work</div>
<div class="right-subtitle">9.00 €</div>
</div>
</div>
Can I achieve this without adding any js files? (I could add them, but it would be better without adding them)

Answer 1

Use flexbox like so:
.general {
padding: 20px;
border: 1px solid #4a4a4a;
}
.subtitle {
display: flex;
justify-content: space-between;
}
.left-subtitle {
padding-right: 5px;
display: flex;
flex: 1;
}
.right-subtitle {
padding-left: 5px;
position: relative;
}
.left-subtitle:after {
content: '';
flex: 1;
border-bottom: 1px solid blue;
}
<div class="general">
<h3 class="title">Foo</h3>
<div class="subtitle">
<div class="left-subtitle">Text1</div>
<div class="right-subtitle">9.00 €</div>
</div>
</div>