title: CSS - Vertically center 3 elements
body: <p>I have a table with 4 columns. At a certain browser width, the last 3 columns are stacked vertically by setting the display value to block. Now, I would like to vertically center these 3 cells in the row, but I have no clue how to do this. Changing the HTML is not an option, so the solution needs to be CSS only.</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>.myTable tr &gt; td:not(:first-of-type),
  .myTable tr &gt; th:not(:first-of-type) {
        display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>     &lt;table class="myTable"&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;Title&lt;/th&gt;
                &lt;th&gt;t2&lt;/th&gt;
                &lt;th&gt;t3&lt;/th&gt;
                &lt;th&gt;t4&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum risus sed libero hendrerit ullamcorper. Aliquam sit amet ante risus. Phasellus interdum consequat diam, at mattis nulla aliquam quis. Ut ac fermentum justo, cursus dapibus augue. Vivamus efficitur ipsum lacus, id semper ex lobortis sollicitudin. Donec luctus, nibh at elementum venenatis, massa justo fermentum enim, et consequat velit diam ut mauris. Duis at dictum turpis.&lt;/td&gt;
                &lt;td&gt;Content&lt;/td&gt;
                &lt;td&gt;Content&lt;/td&gt;
                &lt;td&gt;Content&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/efkn6q21/6/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <p>Currently it looks like this:
  <a href="https://i.stack.imgur.com/MPM1T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MPM1T.png" alt="Current situation"></a></p>
  
  <p>But it should be like this:</p>
  
  <p><a href="https://i.stack.imgur.com/6AUKm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6AUKm.png" alt="enter image description here"></a></p>