getting div to float right and align bottom of variable div - html

Question

I'm trying to create a template for some rotating spotlights we create here at work, and what I'm trying to do should be rather simple.
Here is my fiddle: http://jsfiddle.net/aeromax/2t4k4cf9/
What I'm trying to do, is to get #spotlightCTA to float right (easily doable) and align to the bottom of the #spotlightTitle, so that the call to action moves up or down depending on how tall the title is.
Here is the styles associated with these two divs:
#spotlightTitle {
width: auto;
height: auto;
display: inline-block;
bottom: 0px;
}
#spotlightCTA {
position: relative;
display: inline-block;
width: 300px;
text-align: right;
cursor: pointer;
right: 0px;
float: right;
}
And my HTML
<div id="spotlightContent">
<div id="spotlightTitle">
<div class="title">This is a test title.<br>Let's make it longer.
</div>
</div>
<div id="spotlightCTA" class="animate">
<span>This is a call to action.</span>
<button type="">Test button</button>
</div>
</div>
If I float right, it aligns to the top. If I remove the float, it aligns to the bottom but I can't get it to align to the right.
Thanks in advance!

Answer 1

Flexbox can do that.
div {
background-color: rgba(10, 10, 10, .2);
}
/*Containers*/
#spotlightContainer {
position: relative;
height: 200px;
width: 646px;
padding: 10px 20px 0px 20px;
background-color: rgba(0, 0, 0, .4);
}
#spotlightContent {
width: 646px;
height: auto;
padding: 30px 0px 0px 0px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
#spotlightTitle {
width: auto;
height: auto;
display: inline-block;
bottom: 0px;
}
/*CTA*/
#spotlightCTA {
position: relative;
display: inline-block;
width: 300px;
text-align: right;
cursor: pointer;
right: 0px;
float: right;
}
#spotlightCTA span {
font-family: "Open Sans", "Helvetica Neue", helvetica, arial, sans-serif;
font-weight: 300;
color: #fff;
display: inline-block;
padding: 5px 0px 0px 0px;
}
#spotlightCTA button {
background-color: #ffd200;
border-radius: 0px;
border: none;
margin: 0px 0px 0px 15px;
padding: 5px;
vertical-align: text-bottom;
}
.title {
font-family: "Oswald", "Helvetica Neue", helvetica, arial, sans-serif;
color: #fff;
font-weight: 600;
max-width: 400px;
font-size: 32px;
line-height: 1.2;
display: inline-block;
}
<div id="spotlightContainer">
<div id="spotlightContent">
<div id="spotlightTitle">
<div class="title">This is a test title.
<br>Let's make it longer.
</div>
</div>
<div id="spotlightCTA" class="animate">
<span>This is a call to action.</span>
<button type="">Test button</button>
</div>
</div>
</div>