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.

HTML+JQuery Equalizer Bars aligned to bottom / middle

2 Answers