Does anybody understand how I'd have the ability to squeeze products "videoid" and "timestamp" together? i've both of them absolutely situated to ensure that they visit the bottom right of the container, but I would like these to display alongside one another (video first, then timestamp) rather than on the top of one another. I have attached a fundamental concept of my heirarchy and CSS together with a picture of what is 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 also 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 is happening on the website: enter image description here

Can someone please assist me? I believe I have to group the 2 together but I'm not sure how to overcome it after that. Thanks, Matt

Improve your HTML slightly:

POST TITLE
<label>
    <div class="timestamp">
        Posted 'X' Days Ago
    </div>
    <div class="videoid">
        VIDEO
    </div>
</label>

I am unsure of where POST TITLE is going.

Remove position: absolute on .timestamp and .videoid, and rather:

#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.