How to align div to the bottom of another div in HTML?

Question

How do I align div to the bottom of another div in HTML? And why it doesn't work? HTML:

<div id="big">
      <div class="small">1</div>
      <div class="small">2</div>
      <div class="small">3</div>
</div>

CSS:

#big {
    background-color: red;
    margin: 10px;
}

.small {
    width: 150px;
    height: 150px;
    background-color: blue;
    float: left;
    display: inline-block;
    position: absolute;
    bottom: 0px;
    margin: 10px;
    display: inline-block;
}

Answer 1

Your question is unclear but do you mean like this?..

#big {
    display:table-cell;
    position:relative;
    vertical-align:bottom;
    background-color: red; margin: 10px; width: 800px; height: 300px;
}

.small {
    display: inline-block; 
    width: 150px; height: 150px; background-color: blue; 
    margin: 10px;
}

<div id="big">
      <div class="small">1</div>
      <div class="small">2</div>
      <div class="small">3</div>
</div>