Positioning divs with display: inline-block. How to adapt height one after the other?

Question

I've been searching and trying to do a simple thing and I cannot achieve it. The thing is that I want to apply a display inline-block to some divs but align them one after the other. Like the photo.

So the problem is that number 4 and 5 are positioned after the 1 with display inline-block:

So what can I do? Thanks!

.post-it {
  background-color: #F00;
  height: 140px;
  padding: 1em;
  width: 150px;
  display: inline-block;
  margin: 0 1.3em 1.5em 0;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50);
}

 .title {
   font-size: 2em;
   font-weight: bold;
   line-height: 1em;
   margin-bottom: .2em;
}

#today {
  height: 300px;
}

<div>
  <div class="post-it" id="today">
    <header>
      <div class="title">
        Day 25
      </div>
      <hr>
    </header>
  </div>
  <div class="post-it">
    <header>
      <div class="title">
        Day 26
      </div>
      <hr>
    </header>
  </div>
  <div class="post-it">
    <header>
      <div class="title">
        Day 27
      </div>
      <hr>
    </header>
  </div>
  <div class="post-it">
    <header>
      <div class="title">
        Day 28
      </div>
      <hr>
    </header>
  </div>
  <div class="post-it">
    <header>
      <div class="title">
        Day 29
      </div>
      <hr>
    </header>
  </div>
</div>

Answer 1

Try setting a fixed width on the outer div I called it #calendar and then add the property float: left to your .post-it class. I hope that helps!

.post-it {
  background-color: #F00;
  height: 140px;
  padding: 1em;
  width: 150px;
  display: inline-block;
  margin: 0 1.3em 1.5em 0;
 float: left;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50);
}

 .title {
   font-size: 2em;
   font-weight: bold;
   line-height: 1em;
   margin-bottom: .2em;
}

#today {
  height: 300px;
}
#calendar {
  width: 800px;
}

<div id="calendar">
  <div class="post-it" id="today">
    <header>
      <div class="title">
        Day 25
      </div>
      <hr>
    </header>
  </div>
  <div class="post-it">
    <header>
      <div class="title">
        Day 26
      </div>
      <hr>
    </header>
  </div>
  <div class="post-it">
    <header>
      <div class="title">
        Day 27
      </div>
      <hr>
    </header>
  </div>
  <div class="post-it">
    <header>
      <div class="title">
        Day 28
      </div>
      <hr>
    </header>
  </div>
  <div class="post-it">
    <header>
      <div class="title">
        Day 29
      </div>
      <hr>
    </header>
  </div>
</div>