CSS - Quick Positioning Question - css

Question

Does anyone know how I'd be able to position the items "videoid" and "timestamp" together? i have them both absolutely positioned so that they go to the bottom right of their container, but I'd like them to display next to each other (video first, followed by timestamp) instead of on top of each other. I've attached a basic idea of my heirarchy and CSS along with an image of what's happening.
<div id="featured_articles">
<ul>
<li>
<a href="LINK">
POST FEATURED IMAGE
</a>
<a href="LINK">
<label>
POST TITLE
<div class="timestamp">
Posted 'X' Days Ago
<div class="videoid"
VIDEO
</div>
</div>
</label>
</a>
</li>
</ul>
</div>
And the CSS:
#featured_articles label .timestamp {
position: absolute;
top: -20px;
right:0px;
background:rgba(0, 189, 246, 0.5);
color: #000;
font-size: 10px;
line-height: 20px;
padding: 0 10px;
text-transform: uppercase;
}
#featured_articles label .videoid {
position:absolute;
bottom:0px;
right:0px;
background:rgba(148, 0, 246, 0.5);
color:#fff;
font-size:10px;
line-height: 20px;
padding:0 10px;
text-transform:uppercase;
}
Here's what's happening on the site:
Can someone please help me out? I think I need to group the two together but I don't know how to approach it from there.
Thanks,
Matt

Answer 1

Change your HTML slightly:
POST TITLE
<label>
<div class="timestamp">
Posted 'X' Days Ago
</div>
<div class="videoid">
VIDEO
</div>
</label>
I'm not entirely sure where POST TITLE should go.
Remove position: absolute on .timestamp and .videoid, and instead:
#featured_articles label {
position:absolute;
bottom:0px;
right:0px;
}
Finally, add float: left to #featured_articles label .timestamp, and overflow: hidden to #featured_articles label .videoid.