How to make texts which are different in the number of characters start from the same place?

My design looks like this :: not aligned well vertically

enter image description here

<div class="sum"><div class="title">Summary</div><div class="results"><div class="box"><div>Reaction</div><div class="score">80 / 100</div></div><div class="box"><div>Memory</div><div class="score">92 / 100</div></div><div class="box"><div>Verbal</div><div class="score">61 / 100</div></div><div class="box"><div>Visual</div><div class="score">72 / 100</div></div></div></div>my css code : .results{   display: flex;   flex-direction: column;   height: 360px;   justify-content: space-evenly;}.results .box{   display: flex;   justify-content: space-around;   text-align: justify; }

<<sadly, "text-align: justify;" making no difference when the flex is in action>>I know that the "justify-content: space-evenly;" is the reason they are not aligned well, but I wanted to know if there is a solution that allows me to still use the flex and still make them align well.