Bottom Aligned div in div that fills container horizontally

Question

I've been working on this for hours: I can not seem to get the "tag" div to vertically align to the bottom of the div it's in. The div it is in expands horizontally to fill the div it is in, which changes in size horizontally because it is next to a div with an image. I would love to get this "tag" div to just stick to the bottom of its' container but I can't seem to figure it out. I am also open to reorganizing my divs if that is necessary.

I've tried setting bottom: 0; overflow: hidden; I've tried setting it's container div position: relative;, and its' position: absolute;

Here is a link to jsfiddle: http://jsfiddle.net/29WKX/8/

Here's where I'm at right now:

CSS:

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  padding-top: 100px;
  background-color: deepskyblue;
}

    .content{
      background: #fff;
      margin: 0 auto;
      width:720px;
      text-align: center;
      padding: 1px;
      /* border-radius */
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      /* box-shadow */
      -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
      -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
      box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
    }
    .right-pic {
        float: right;
        width: auto;
    }
    .left-pic{
      float: left;
      width: auto;
    }
    .text {
      background-color: lightgray;
      overflow: hidden;
            position: relative;
    }
    .tag{
      background-color: red;
      position: relative;
      bottom: 0;
    }

And here's my HTML:

<div class="content">
  <div class="right-pic">
    <img src="" width="300px" height="220px" alt="image">
  </div>
  <div class="text">
    <h2>Title</h2>
    <p>this takes up remaining space to the left</p>
  </div>
  <div class="tag">tag</div>
  <div style="clear: both"></div>
</div>
<br />
<div class="content">
  <div class="left-pic">
    <img src="" width="320px" height="200px" alt="image">
  </div>
  <div class="text">
  <h2>Title</h2>
    <p>this takes up remaining space to the left</p>
  </div>
  <div style="clear: both"></div>
</div>

Answer 1

If I understood your question right, all you need to do is to add:

position: relative;

in your content element. And a:

position: absolute;

in yout tag element.

Please check this JSFiddle.