title: Collapse table-row's height in pure CSS (without affecting the table width)
body: <p>I have the following piece of HTML with effectively a <code>table</code> for an aligned form:</p>
  
  <pre><code>&lt;div id="one"&gt;
    &lt;p&gt;
      &lt;label for="a"&gt;a&lt;/label&gt; &lt;input type="text" id="a"&gt;
    &lt;/p&gt;
    &lt;p class="h"&gt;
      &lt;label for="b"&gt;bbbbbb&lt;/label&gt; &lt;input type="text" id="b"&gt;
    &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>with the following CSS:</p>
  
  <pre><code>#one {
    display: table;
    width: auto;
  }
  
  p {
    display: table-row;
  }
  
  p label, p input {
    display: table-cell;
  }
  </code></pre>
  
  <p><code>#one</code> is something of automatically computed width, and <code>label</code>s and <code>input</code>s are of unknown width. I want the functionality of an aligned form, but such that adding class <code>h</code> to their row removes then, making space for other elements vertically, but not changing width of <code>#one</code>, since it is supposed to sit next to other elements with automatically computed width.</p>
  
  <p>What <code>.h</code> definition in CSS3 would give me my "table row" (<code>p</code>) height equal to 0 or otherwise visually remove it without changing the width of its parent? I can change HTML if needed, but I want to find a solution that does not use JS for that.</p>
  
  <p><code>visibility: hidden</code> does not remove it vertically, <code>height: 0</code> does not work (probably because it is <code>table-row</code>), and <code>display: none</code> does not work, because it changes the effective width to 0. And I want my <code>#one</code> to stay the same width. Using <code>display: block !important</code> in combination with <code>height: 0</code> partially works, but leaves a weird vertical space (and <code>block</code> should not really be a child of <code>table</code>).</p>
  
  <p>What I'm searching for is similar to <a href="https://stackoverflow.com/questions/147208/hiding-table-rows-without-resizing-overall-width">this SO question</a>, but I'm searching for a pure CSS solution and without fixing the table width.</p>
  
  <p>You can play with it here: <a href="https://jsfiddle.net/sfjwkn62/3/" rel="nofollow noreferrer">JSFiddle</a>.</p>