0

I am trying to create the following effect

enter image description here

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>
supernova
  • 127
  • 1
  • 1
  • 12
  • I think your error can be solved here. [Auto-size-dynamic-tsx](https://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container) – Mratyunjay Agrawal Aug 21 '20 at 03:52

2 Answers2

2

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>
s.kuznetsov
  • 14,870
  • 3
  • 10
  • 25
-1

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>
Billu
  • 2,733
  • 26
  • 47