HTML+JQuery Equalizer Bars aligned to bottom / middle

I'm trying to build a very simple HTML/JQuery Equalizer. The Problem I can't fix is, to align the bars to the bottom and expand to the top.

Here's my Code:

window.setInterval(function(){
  $('.eqitem').each(function(){
    $(this).height(Math.floor(Math.random() * 250) + 50 );
  });
}, 500);

.parent{
    height: 300px;
}

.eqitem{
    float: left;
    height: 0px;
    width: 10px;
    background: darkred;
    margin-right: 5px;
    -webkit-transition: height 0.5s ease-out;
    transition: height 0.5s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
    <div id="eq">
        <div class="eqitem"></div>
        <div class="eqitem"></div>
        <div class="eqitem"></div>
        <div class="eqitem"></div>
        <div class="eqitem"></div>                    
    </div>
</div>

I tried vertical-align, absolute and relative positioning, bottom attribute, ... Nothing of the above seems to work or even causes unwanted problems.

Thank you guys so much for helping.

You need to mix relative and absolute positioning to position items at the bottom of a relatively positioned container.

To achieve what you want, you need something like this js:

var offset_width = 15;
var i = 0;
$('.eqitem').each(function(){
    $(this).css('left', (i*offset_width) + 'px');
  i++;
});  

and this css:

   #eq {
      position:relative;
    display: block;
    height: 300px;
    width: 100px;
     }
    .eqitem{
        position:absolute;
        height: 0px;
        width: 10px;
        background: darkred;
        margin-right: 5px;
        -webkit-transition: height 0.5s ease-out;
        transition: height 0.5s ease-out;
        display:inline-block;

        bottom:0;
    }

Please have a look at the fiddle here: https://jsfiddle.net/catbadger/pzy15m8e/1/