Put text on the same line with button - html

Question

I'm trying to put the text with button on right on the same level but for some reason it doesn't show up correctly. What am I doing wrong?
.lyrics {
margin: 20px 0;
}
.lyrics a {
color: white;
padding: 10px 16px;
border: 1px solid white;
font-size: 11px;
letter-spacing: 2px;
}
.lyrics a:hover {
text-decoration: none;
color: black;
background: #f0d0b5;
}
lyric-align {
display: inline-block;
margin: 0;
}
Song Title <div class="lyrics">Lyrics

Answer 1

Just write html like this:
<div class="lyrics">Song Title Lyrics</div>
And css like this:
.lyrics {
margin: 20px 0;
}
.lyrics a {
color: white;
padding: 10px 16px;
border: 1px solid white;
font-size: 11px;
letter-spacing: 2px;
}
.lyrics a:hover {
color: black;
background: #f0d0b5;
text-decoration: none;
}
And because now you have one div, you can move him where you want. If you want to have a wonder size not across the entire page, but just around the text, use:
.lyrics{
width: fit-content;
width: -moz-fit-content;
}
My recommended solution
I think the best solution would be to do it without DIV, leave only the "a" element there and style it like this. But I don't know what part of the page you didn't show.
HTML
Song Title Lyrics
CSS
.lyrics {
margin: 20px 0;
color: white;
padding: 10px 16px;
border: 1px solid white;
font-size: 11px;
letter-spacing: 2px;
}
.lyrics:hover {
text-decoration: none;
color: black;
background: #f0d0b5;
}

Answer 2

Couple of things I see in your code:
A div is a block element, it's going to take up the whole page horizontally where it is placed.
The button is there, you can see it if you hover over the space below the text Song Title. But you don't have a closing tag for the first tag.
Extra Credit
Your CSS for your class lyric-align is missing a dot in front of the class's identifier.

Answer 3

Does this work for you?
I think you want the lyrics to be inline .
.lyrics {
margin: 20px 0;
}
.lyrics a {
color: white;
padding: 10px 16px;
border: 1px solid white;
font-size: 11px;
letter-spacing: 2px;
}
.lyrics a:hover {
text-decoration: none;
color: black;
background: #f0d0b5;
}
lyric-align {
display: inline-block;
margin: 0;
}
.lyrics {
display:inline;
}
.song-title {
display:inline;
}
<p class="song-title">Song Title </p><a class="lyrics" href="#">Lyrics</a></div>
If you want a button instead of the link, view this link.