Issues with bottom, right absolute positioning

Question

I'm trying to position a checkbox at the bottom right of a div container. The container will grow in height on hover, and I want the checkbox to be sticky so that it remains at the bottom right as the div grows.

I'm having some real trouble getting the checkbox to be in the bottom right.

Here's my code, and a Fiddle.

<div class="objectWrap">
    <div class="calendarObject">
        <label class="objectTitle" for="chkOb2">Tasks</span>
        <input type="checkbox" id="chkOb2" />
    </div>
</div>

---

.objectWrap {
    position:relative;
    float:left;
    height:75px;
    margin-bottom:15px;
}
    .objectWrap:not(:last-child) {
        margin-right:15px;
    }
    .objectWrap:hover {
        cursor:pointer;
    }

.calendarObject {
    position:relative;
    width:72px;
    height:75%;
    background-color:#f5f5f5;
    border-radius:5px;

    transition: height 400ms;
    -webkit-transition: height 400ms;
}
    .calendarObject label.objectTitle {
        position:absolute;
        top:3px;
        left:3px;

        font-size:13px;
        color: #8998a4;
    }
    .calendarObject input[type="checkbox"] {
        position:absolute;
        bottom:0px;
        right:0px;
    }
    .calendarObject:hover {
        height:100%;
        transition: height 400ms;
        -webkit-transition: height 400ms;
    }

Answer 1

You have a bug in your code. </span> should be </label>.

Corrected HTML:

<div class="objectWrap">
    <div class="calendarObject">
        <label class="objectTitle" for="chkOb2">Tasks</label>
        <input type="checkbox" id="chkOb2" />
    </div>
</div>​

Corrected JS Fiddle