title: Vertical alignment of inline-grid elements
body: <p>I don't understand the logic of vertical alignment of <code>inline-grid</code> elements. </p>
  
  <p>The 2nd example works fine (see the code), but the 1st is not. Why? And how I could fix it, as shown below in screenshot?</p>
  
  <p><a href="https://i.stack.imgur.com/7Buwa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Buwa.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>Also note.</p>
    
    <p>Instead of using <code>display: inline-grid</code>, we can use <code>display: inline-flex</code> + <code>flex-direction: column</code> with the same result.</p>
    
    <p>Thus, if the task could not be achieved with <code>inline-grid</code>, probably it could be solved using <code>inline-flex</code>.</p>
  </blockquote>
  
  <p><a href="https://jsfiddle.net/5roxxy02/" rel="nofollow noreferrer">For ones, who prefer jsFiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
   width: 500px;
  }
  
  .inline-grid {
   display: inline-grid;
   width: 49%;
  }
  
  div {
   border: 1px solid red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h3&gt;not ok&lt;/h3&gt;
  
  &lt;div class="inline-grid"&gt;
  &lt;div&gt;&lt;img src="http://i.imgur.com/joY41yV.png"&gt;&lt;/div&gt;
  &lt;div&gt;Lorem ipsum&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="inline-grid"&gt;
  &lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/div&gt;
  &lt;div&gt;Lorem ipsum&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;hr&gt;
  
  &lt;h3&gt;ok&lt;/h3&gt;
  
  &lt;div class="inline-grid"&gt;
  &lt;div&gt;&lt;img src="http://i.imgur.com/joY41yV.png"&gt;&lt;/div&gt;
  &lt;div&gt;Lorem ipsum&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="inline-grid"&gt;
  &lt;div&gt;&lt;img src="http://i.imgur.com/joY41yV.png"&gt;&lt;/div&gt;
  &lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>