I've been trying to figure out how to position a smaller biography-style text next to this large title, but I'm having trouble finding a solution. I've experimented with float: left, float: right, and display: flex in my CSS code. Below is the code snippet along with a screenshot of the current container where the text is located.
-my css
.toptext{
float: left;
text-align: left;
font-weight: bold;
font-size: 250px;
height: 0%;
overflow: hidden;
text-overflow: ellipsis;
}
.biotext{
float:right;
font-weight: bold;
font-size: 15px;
height: 0%;
overflow: hidden;
text-overflow: ellipsis;
}
-my html
<div class="container-fluid bg-2">
<h1 class="biotext">This site serves as a creative outlet and condensed center for those things that interest
my unique sneaker collection, and my adoration for gaming that I spread through several social mediums.
</h1>
<h1 class="toptext">Hi, I'M</h1>
<h1 class="toptext">ANDREW.</h1>
</div>