HTML + jQuery alignment patterns align bottom / middle

Question

I am trying to create a very simple HTML / jQuery equalizer. The problem that I cannot fix is ​​to align the columns at the bottom and expand up.

Here is 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>

Run codeHide result

I tried vertical alignment, absolute and relative positioning, bottom attribute, ... None of the above work or even cause unwanted problems.

Thanks guys for the help.

Answer 1

You need to mix relative and absolute positioning to position the positions at the bottom relative to the positioned container.

, - js:

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

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;
    }

, : https://jsfiddle.net/catbadger/pzy15m8e/1/

Answer 2

, :

#eq{
  display : flex;
  height: 300px;
}

.eqitem{
   display: inline-block;
  align-self: flex-end;
}

Fiddle