3 колонки в том же уровне

Question

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> 
     </div> 
     <div class="widget"> 
     <span class="widget__title"> TITLE 2 </span> 
     <p> 
      BIGGER TEXT BUT STILL NORMAL BLA BLA HEHE LOREM IPSUM 
     </p> 
     </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> 
     </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 { 
    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; 
} 

https://jsfiddle.net/3ueoxc4k/1/embedded/result/

Я не знаю, почему именно этот эффект 'лестнице', я хочу быть в состоянии оставьте три на одном уровне, но я точно не знаю, почему возникает эффект лестницы.

Любая помощь очень приветствуется.

Answer 1

Добавить

vertical-align: top; 

Для .widget {}

Answer 2

Просто измените

.widget { 
    width: 15%; 
    float: left; 
    } 

Вы используете дисплей: встроенный блок; который создает блок согласно содержимому div.