CSS - Quick Positioning 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 dis开发者_如何学Pythonplay 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

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.