сделать 3 изображения, которые находятся внутри трех столбцов, отображаются на одном уровне высоты

Question

Мне сложно определить, как сделать 3 изображения на одном уровне. Я пытался использовать vertical-align: bottom; и margin-bottom в предыдущем параграфе, но не работал.

скрипку: https://jsfiddle.net/3ueoxc4k/2/embedded/result/

HTML:

<section class="info"> 
    <div class="container"> 
    <div class="info__title"> 
     <h2> Some main title </h2> 
    </div> 
    <div class="info__widgets"> 
     <div class="widget"> 
     <span class="widget__title"> TITLE1 </span> 
     <p> 
      NORMAL TEXT ABOUT SOMETHING HEHEHE. 
     </p> 
      <img src="http://avatarmaker.net/free-avatars/avatars/games_225/super_mario_259/super_mario_panic_avatar_100x100_25831.gif"/> 
     </div> 
     <div class="widget"> 
     <span class="widget__title"> TITLE 2 </span> 
     <p> 
      BIGGER TEXT BUT STILL NORMAL BLA BLA HEHE LOREM IPSUM 
     </p> 
     <img src="http://avatarmaker.net/free-avatars/avatars/games_225/super_mario_259/super_mario_panic_avatar_100x100_25831.gif"/> 
     </div> 
     <div class="widget"> 
     <span class="widget__title"> TITLE 3 </span> 
     <p> 
      SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT 
     </p> 
     <img src="http://avatarmaker.net/free-avatars/avatars/games_225/super_mario_259/super_mario_panic_avatar_100x100_25831.gif"/> 
     </div> 
    </div> 
    </div> 
</section> 

CSS:

.info { 
    position: relative; 
    background: #fafafa; 
} 
.info__title { 
    text-align: center; 
    padding-top: 2.25rem; 
    padding-bottom: 2.25rem; 
} 
.info__title h2 { 
    font-family: Oswald, Helvetica, sans-serif; 
    font-size: 1.5rem; 
    color: #999; 
    font-weight: 300; 
} 
.info__widgets { 
    margin-top: 2.25rem; 
    width: 100%; 
    text-align: center; 
} 
.widget { 
    vertical-align: top; 
    display: inline-block; 
    width: 50%; 
    margin-bottom: 2.25rem; 
} 
@media only screen and (min-width: 620px) { 
    .widget { 
    width: 30%; 
    display: inline-block; 
    } 
} 
@media only screen and (min-width: 1360px) { 
    .widget { 
    width: 15%; 
    display: inline-block; 
    } 
} 
.widget * { 
    display: block; 
    width: 100%; 
    text-align: center; 
} 
.widget i:before { 
    font-size: 1.875rem; 
    color: #ccc; 
} 
.widget .i-alcohol-shop { 
    -webkit-transform: scale(1.35); 
    -moz-transform: scale(1.35); 
    -ms-transform: scale(1.35); 
    -o-transform: scale(1.35); 
    transform: scale(1.35); 
} 
.widget__number { 
    margin-top: 1.5rem; 
    font-family: Oswald, Helvetica, sans-serif; 
    font-size: 2.125rem; 
    color: #E97228; 
    font-weight: 400; 
    display: block; 
} 
.widget__title { 
    margin-top: 1rem; 
    margin-bottom: 2rem; 
    font-family: Oswald, Helvetica, sans-serif; 
    font-size: 1.25rem; 
} 

Answer 1

Попробуйте дать сдачи этого CSS на всех изображениях:

height: 50px; 
margin-top: 100px; 

Это немного грубое решение, но если вы играете с этими значениями, я думаю, вы сможете получить то, что хотите.