同一级别中的3列

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/

我不确切知道为什么这种“楼梯”效果，我希望能够将三个保持在同一水平，但是我不知道为什么会出现楼梯效果。

任何帮助都非常欢迎。