How do I overlap a div with text? - html

Question

I'm trying to overlap the text over the div below it. The problem is that I need it all in the bottom right of the page so it already has position: absolute.
This is what I currently have.
And this is what I'm trying to make it look like:
https://jsfiddle.net/7ow5p192/
body {
background-color: black;
}
.title {
color: white;
text-align: left;
}
.artist {
color: black;
font-size: 60px;
line-height: 60px;
}
.artist-container {
text-align: left;
width: 100%;
background-color: white;
display: block;
}
.nameContain {
font-weight: bold;
position: absolute;
display: block;
right: 0;
bottom: 0;
max-width: 50%;
font-size: 50px;
}
.nameContain2 {
position: relative;
}
<div class="nameContain">
<span class="title">Smells Like Teen Spirit</span>
<div class="artist-container"><span class="artist">Nirvana</span></div>
</div>

Answer 1

A simple text-align: right should do the trick.
body {
background-color: black;
}
.title {
color: white;
}
.artist {
color: black;
font-size: 60px;
line-height: 60px;
}
.artist-container {
width: 100%;
background-color: white;
display: block;
}
.nameContain {
font-weight: bold;
position: absolute;
display: block;
right: 0;
bottom: 0;
max-width: 50%;
font-size: 50px;
text-align: right;
}
<div class="nameContain">
<span class="title">Smells Like Teen Spirit</span>
<div class="artist-container"><span class="artist">Nirvana</span></div>
</div>