title: Align non-equal height divs to top
body: <p>I'm creating a portfolio with different height items. Each item is an <code>inline-block</code> div with a fixed width. So, I got 4 items in each row. I've aligned them vertically to top and it's fine so far. The problem begins since the 2nd row. I need each item to be aligned regarding to its upper item, not the row. <strong>I'd like to do it by pure CSS right in my styles codes. Hopefully, no using plugin, library or pre-maid code</strong>. See the image to find out more about my meaning.</p>
  
  <p><a href="https://i.stack.imgur.com/y1OGy.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y1OGy.jpg" alt="enter image description here"></a></p>
  
  <p>The code I got is as below.
  HTML (by PHP):</p>
  
  <pre><code>&lt;div class="portfolio"&gt;
      &lt;?php foreach($portfolio as $work) : ?&gt;
          &lt;div class="work"&gt;
              &lt;div class="work-image"&gt;
                  &lt;img src="images/&lt;?php echo $work[0]; ?&gt;" alt="&lt;?php echo $work[1]; ?&gt;"&gt;
                  &lt;h5 class="work-title"&gt;&lt;?php echo $work[1]; ?&gt;&lt;/h5&gt;
              &lt;/div&gt;
  
              &lt;div class="work-description"&gt;
                  &lt;?php echo $work[2]; ?&gt;
              &lt;/div&gt;
              &lt;div class="work-tech"&gt;
                  &lt;h5&gt;&lt;?php echo $lang['TECHNOLOGIES']; ?&gt;&lt;/h5&gt;
                  &lt;ul&gt;
                  &lt;?php foreach($work[4] as $tech) : ?&gt;
                      &lt;li class="tech-item"&gt;&lt;span class="fa fa-check"&gt;&lt;/span&gt; &lt;?php echo $tech; ?&gt;&lt;/li&gt;
                  &lt;?php endforeach; ?&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;?php endforeach; ?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS (by LESS):</p>
  
  <pre><code>#portfolio {
      background: url('../images/portfolio-bg.jpg') repeat-y center top;
      background-attachment: fixed;
      .portfolio {
          text-align: center;
          .work {
              display: inline-block;
              width: 280px;
              margin: 5px;
              padding: 0;
              vertical-align: top;
              background: green;
              .work-image {
                  position: relative;
                  width: 100%;
                  height: 186px;
                  overflow: hidden;
                  background: black;
                  img {
  
                  }
                  .work-title {
                      position: absolute;
                      bottom: 10px;
                      left: 0;
                      right: 0;
                      margin: 0 auto;
                      color: red;
                  }
              }
              .work-description {
                  padding: 15px;
                  font-size: 14px;
                  text-align: justify;
              }
              .work-tech {
                  padding: 15px;
                  text-align: left;
                  h5 {
                      margin-bottom: 10px;
                  }
              }
          }
      }
  }
  </code></pre>