Q:

Vertical distribution of elements (and animation) - jQuery

I like to know the cleanest method to distribute elements vertically with jQuery.  I nailed it but it's not very clean right >< ?  I would like to get to do it without plugin... Thank you in advance ;-)
Here my JSFiddle
jQuery(document).ready(function($) {
var gap         = 10;
var firstElem   = $('#lorem');
if(firstElem.length){
    var heightCall  = (firstElem.offset().top)+(firstElem.outerHeight())+(gap);
    var middleElem  = $('#dolore');
    middleElem.offset({top : heightCall});
    var lastElem   = $('#amet');
    var NewHeightCall  = (middleElem.offset().top)+(middleElem.outerHeight())+(gap);
    lastElem.offset({top : NewHeightCall});

    /* Animation */
    $('#lorem, #dolore, #amet').hover(
        function(){
            $(this).stop().animate({left: (($(this).offset().left)-(20))+'px',opacity:'0.5'},'slow')
        },
        function(){
            $(this).stop().animate({left: (($(this).offset().left)+(20))+'px',opacity:'1'},'slow')
    });
}

});

A:

I have fiddled around with your code:
This is a simplified version:
HTML:
<div id="lorem" class="vertical-block">My first ID div</div>
<div id="dolore" class="vertical-block">My second ID div.<br>My second ID div.  My second ID div.</div>
<div id="amet" class="vertical-block">My third ID div</div>

CSS:
.vertical-block {
    position: absolute;
    padding:15px;
}
#lorem{
    top:20%;
    right:40px;
    background:#f79673;
}
#dolore{
    right:80px;
    background:#cd7454;
}
#amet{
    right:40px;
    background:#a15338;
}

.vertical-block:hover {
    opacity: 0.5;
    padding-right: 30px;
    -webkit-transition: all 2s;
    transition: all 0.4s;
}

Javascript:
jQuery(document).ready(function($) {
    var gap         = 10;
    var firstElem   = $('#lorem');
    var top = 0;

    $('.vertical-block').each(function(element){
        var $currentElement = $(this);
        if (top === 0) {
            top = $currentElement.offset().top + $currentElement.outerHeight() + gap;
        } else {
            $currentElement.offset({top: top});
            top = top + $currentElement.outerHeight() + gap;
        }
    });
});

https://jsfiddle.net/rae2x4e0/1/
Now if you want to go for a purely css solution, then:
HTML:
<div class="container">
    <div id="lorem" class="vertical-block">My first ID div</div>
    <br />
    <div id="dolore" class="vertical-block">My second ID div.<br>My second ID div.  My second ID div.</div>
    <br />
    <div id="amet" class="vertical-block">My third ID div</div>
</div>

CSS:
.container {
    position-relative;
    text-align: right;
    padding-top: 10%;
}    
.vertical-block {
    padding:15px;
    display: inline-block;
    margin-top: 20px;
}
#lorem{
    right:40px;
    background:#f79673;
}
#dolore{
    right:80px;
    background:#cd7454;
}
#amet{
    right:40px;
    background:#a15338;
}

.vertical-block:hover {
    opacity: 0.5;
    padding-right: 30px;
    -webkit-transition: all 2s;
    transition: all 0.4s;
}

https://jsfiddle.net/ycdwpjxw/1/

