How to get margin to be relative to text amount css

I am creating a featured area in my Wordpress blog, to do so I have had to use z-oindex and absolute positioning; to position the text over the image. However, with absolute positioning whenever my text exceeds a certain amount the layout begins to break. Is there a way to conditionally change the top-margin based on the length of the text ? (without using javascript)

Here is my jsfiddle: http://ift.tt/1abTW1c

#featured_home {
    width: 960px;
    height: 325px;
}

#featured_home a {

    text-decoration: none;

    color: white;

}

.sticky {

    margin: 10px;

}

.desc {

    overflow: hidden;

    height: 265px;

}

.sticky img {

    width: 120%;

    height: auto;

    z-index: -15;

    position: relative;

}

.sticky h2 {

    z-index: 10;

    position: relative;

    display: block;

    max-width: 330px;

}

.sticky:nth-child(1) {

    width: 490px;

    height: 265px;

    overflow: hidden;

    float: left;

    margin-left: 0px;

}

.sticky:nth-child(1) h2 {

    color: white;

    font-family:'Soho Gothic Pro', arial, sans-serif;

    font-size: 22px;

    padding: 10px;

    background-color: rgba(218, 24, 114, 0.75);

    z-index: 10;

    position: absolute;

    display: inline-block;

    margin-top: 223px;

    padding-right: 183px;

    max-width: 298px;

}

.sticky:nth-child(2) {

    width: 215px;

    height: 122px;

    overflow: hidden;

    float: right;

    margin-right: 0;

}

.sticky:nth-child(2):hover {

    background-color: rgba(218, 24, 114, 0.75);

    transition: all 0.5s ease-in-out;

}

.sticky:nth-child(2) h2 {

    display: none;

}

.sticky:nth-child(2):hover h2 {

    font-family:'Soho Gothic Pro', arial, sans-serif;

    font-size: 20px;

    line-height: 1.2em;

    display: inline-block;

    z-index: 10;

    position: absolute;

    max-width: 200px;

    padding: 10px;

    transition: all 0.5s ease-in-out;

}

.sticky:nth-child(3) {

    width: 215px;

    height: 122px;

    overflow: hidden;

    float: right;

}

.sticky:nth-child(3):hover {

    background-color: rgba(104, 182, 109, 0.75);

    transition: all 0.5s ease-in-out;

}

.sticky:nth-child(3) h2 {

    display: none;

}

.sticky:nth-child(3):hover h2 {

    font-family:'Soho Gothic Pro', arial, sans-serif;

    font-size: 20px;

    line-height: 1.2em;

    display: inline-block;

    z-index: 10;

    position: absolute;

    max-width: 200px;

    padding: 10px;

    transition: all 0.5s ease-in-out;

}

.sticky:nth-child(4) {

    width: 215px;

    height: 122px;

    overflow: hidden;

    float: right;

    margin-right: 0;

}

.sticky:nth-child(4):hover {

    background-color: rgba(254, 162, 63, 0.75);

    transition: all 0.3s ease-in-out;

}

.sticky:nth-child(4) h2 {

    display: none;

}

.sticky:nth-child(4):hover h2 {

    font-family:'Soho Gothic Pro', arial, sans-serif;

    font-size: 20px;

    line-height: 1.2em;

    display: inline-block;

    z-index: 10;

    position: absolute;

    max-width: 200px;

    padding: 10px;

    transition: all 0.3s ease-in-out;

}

.sticky:nth-child(5) {

    width: 215px;

    height: 122px;

    overflow: hidden;

    float: right;

}

.sticky:nth-child(5):hover {

    background-color: rgba(78, 181, 224, 0.75);

    transition: all 0.3s ease-in-out;

}

.sticky:nth-child(5) h2 {

    display: none;

}

.sticky:nth-child(5):hover h2 {

    font-family:'Soho Gothic Pro', arial, sans-serif;

    font-size: 20px;

    line-height: 1.2em;

    display: inline-block;

    z-index: 10;

    position: absolute;

    max-width: 200px;

    padding: 10px;

    transition: all 0.3s ease-in-out;

}

<div id="featured_home">
    <article class="sticky">
        <div class="desc">
            <div class="desc_over">
                 <h2><a href="http://ift.tt/1FaJUaI">The best engineering of 2014</a></h2>

            </div>
            <img width="600" height="338" src="http://ift.tt/1abTW1e" class="attachment-large wp-post-image" alt="hand">
        </div>
    </article>
    <article class="sticky">
        <div class="desc">
            <div class="desc_over">
                 <h2><a href="http://ift.tt/1abTUpT">Girls who Code – gender parity by 2020</a></h2>

            </div>
            <img width="600" height="400" src="http://ift.tt/1FaJWPM" class="attachment-large wp-post-image" alt="H1B8349-1280x853-1024x682">
        </div>
    </article>
    <article class="sticky">
        <div class="desc">
            <div class="desc_over">
                 <h2><a href="http://ift.tt/1abTUpV">Nobel Prize winner’s ‘Grid Cell’ dress</a></h2>

            </div>
            <img width="600" height="429" src="http://ift.tt/1FaJUaT" class="attachment-large wp-post-image" alt="hubbble-2">
        </div>
    </article>
    <article class="sticky">
        <div class="desc">
            <div class="desc_over">
                 <h2><a href="http://ift.tt/1abTUpZ">Code2040 – championing diversity in tech</a></h2>

            </div>
            <img width="560" height="373" src="http://ift.tt/1FaJWPU" class="attachment-large wp-post-image" alt="laura">
        </div>
    </article>
    <article class="sticky">
        <div class="desc">
            <div class="desc_over">
                 <h2><a href="http://ift.tt/1abTWhx">4D Printing</a></h2>

            </div>
            <img width="600" height="338" src="http://ift.tt/1FaJWPZ" class="attachment-large wp-post-image" alt="4dprint-1024x576">
        </div>
    </article>
</div>

Is there another way to resolve the issue?