<p> tag not floating as expected

Question

I've stripped out my code to only the HTML and CSS. I can actually work around this several different ways, but both my colleague and I are puzzled as to what is causing the p tags not to move up to the top of it's container element. How does it even know to stay flush with the other p tags in the other containers?

Usually a little of debugging can solve the mystery but not this time...

The only thing I'm certain of is that inline-block is part of the cause:

.mixItems .mix{
  display: inline-block;
 }

<div class="mix gridView" > 
    <img src="http://placehold.it/350x200">
    <p class="newsHead">News Headline</p>
    <p class="abstract">Lorem ipsum</p>
</div>

Codepen Demo

Answer 1

by default inline-block is vertical-align:baseline, so you must give to .mixItems .mix this: vertical-align:top

.mixItems {
  padding: 2% 2% 0;
  text-align: justify;
  font-size: 0.1px;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}
.mixItems:after {
  content: '';
  display: inline-block;
  width: 100%;
}
.mixItems .mix,
.mixItems .gap {
  display: inline-block;
  width: 99%;
  overflow: hidden;
  vertical-align: top /* new */
}
@media all and (min-width: 568px) {
  .mixItems .mix,
  .mixItems .gap {
    width: 49%;
  }
}
@media all and (min-width: 992px) {
  .mixItems .mix,
  .mixItems .gap {
    width: 23.5%;
  }
}
.mixItems .mix {
  text-align: left;
  background-color: #f7f7f7;
  margin-bottom: 2%;
  /*display: none;*/
}
.mixItems .mix.gridView img {
  width: 100%;
  display: block;
}
.mixItems .mix.listView img {
  display: none;
}
.mixItems .mix .abstract {
  color: #000;
  font-size: 12px;
  padding: 0 1.5em 1.5em 1.5em;
}
.mixItems .mix .newsHead {
  color: #666;
  font-size: 12px;
  padding: 1.5em 1.5em 0 1.5em;
  font-size: 14px;
  font-weight: bold;
}

<div class="container">
  <div id="mixContainer" class="mixItems">
    <div class="mix gridView category-1 category-z" data-myorder="2016" data-date="20160115">
      <img src="http://placehold.it/350x200">
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20160115</p>
    </div>
    <div class="mix gridView category-3 category-w" data-myorder="2013" data-date="20130115">
      <!--<img src="http://placehold.it/350x200">-->
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20130115</p>
    </div>
    <div class="mix gridView category-1 category-x" data-myorder="2013" data-date="20130230">
      <img src="http://placehold.it/350x200">
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20130230</p>
    </div>
    <div class="mix gridView category-2 category-y" data-myorder="2015" data-date="20150430">
      <img src="http://placehold.it/350x200">
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20150430</p>
    </div>
    <div class="mix gridView category-1 category-x" data-myorder="2014" data-date="20140115">
      <img src="http://placehold.it/350x200">
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20140115</p>
    </div>
    <div class="mix gridView category-1 category-z" data-myorder="2016" data-date="20160115">
      <img src="http://placehold.it/350x200">
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20160115</p>
    </div>
    <div class="mix gridView category-3 category-w" data-myorder="2014" data-date="20140330">
      <img src="http://placehold.it/350x200">
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20140330</p>
    </div>
    <div class="mix gridView category-2  category-x  category-y" data-myorder="2012" data-date="20120315">
      <img src="http://placehold.it/350x200">
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20120315</p>
    </div>
  </div>
</div>

Answer 2

Try this and see what happens:

.mixItems .mix{
    display: inline-block;
    vertical-align: middle;
}

By default, your vertical-align is set to baseline, which is why the <p> tags stay flush at the bottom.