Adjust letter spacing to size of container [duplicate] - css

Question

This question already has answers here:
Auto-size dynamic text to fill fixed size container
(21 answers)
Closed 2 years ago.
I am trying to create the following effect
How do I make it so the letter spacing of the bottom text makes to the end of the container?
HTML
<section class="nav">
<div class="logo">
<p id="top">Reagan</p>
<p id="bottom">Clayton</p>
</div>
</section>

Answer 1

I can offer such a solution:
.logo {
width: 300px;
}
#bottom {
display: flex;
justify-content: space-between;
}
#bottom_two {
display: flex;
justify-content: space-between;
text-transform: uppercase;
}
#bottom_three {
display: flex;
justify-content: space-between;
text-transform: uppercase;
color: blue;
}
<section class="nav">
<div class="logo">
<p id="top">Reagan</p>
<p id="bottom"><span>C</span><span>l</span><span>a</span><span>y</span><span>t</span><span>o</span><span>n</span></p>
<p id="bottom_two"><span>C</span><span>l</span><span>a</span><span>y</span><span>t</span><span>o</span><span>n</span></p>
<p id="bottom_three"><span>C</span><span>l</span><span>a</span><span>y</span><span>t</span><span>o</span><span>n</span></p>
</div>
</section>

Answer 2

Simple solution: just need to use letter-spacing css property.
To see output click on button "Run code snippet".
#logoText{
font-size:45px;
text-transform: uppercase;
margin-bottom:0;
padding-bottom:0
}
#sologunText{
font-size:20px;
letter-spacing: 30px;
margin-top:5px;
padding-top:0
}
<section class="nav">
<div class="logo">
<p id="logoText">Logo Text</p>
<p id="sologunText">Sologun</p>
</div>
</section>