How to align an image to the bottom of the div?
<p>I'm trying to align an image to the bottom of the out <code>div</code> element using <code>vertical-align</code>,but this <code>vertical-align</code> doesn't seem to work,the image is not moving at all.</p>

<pre><code> &lt;div class="row"&gt;
     &lt;div class="col-md-1"&gt;
       &lt;img src="../images/image.png" style="height: 20px; width: 20px;cursor:pointer"/&gt;
     &lt;/div&gt;
     &lt;div class=col-md-11 &gt;
        &lt;div  style="overflow:auto;height:300px"&gt;&lt;/div&gt;
     &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I'm using bootstrap classes for alignments. Is there anything that can make the image <code>div</code> align to the bottom of the outer <code>div</code>?Which is taking the <code>height</code> of second <code>div</code> which is <code>300px;</code>.</p>