title: Can I start new row of CSS table cells without a row wrapper element?
body: <p>Given markup like this:</p>
  
  <pre><code>&lt;div class="a"&gt;A&lt;/div&gt;
  &lt;div class="b"&gt;B&lt;/div&gt;
  &lt;div class="a"&gt;A&lt;/div&gt;
  &lt;div class="b"&gt;B&lt;/div&gt;
  &lt;div class="a"&gt;A&lt;/div&gt;
  &lt;div class="b"&gt;B&lt;/div&gt;
  </code></pre>
  
  <p>Is it possible to style this document to look like this:</p>
  
  <pre><code>|-------|---------|
  |       |         |
  |   A   |    B    |
  |       |         |
  |-------|---------|
  |       |         |
  |   A   |    B    |
  |       |         |
  |-------|---------|
  |       |         |
  |   A   |    B    |
  |       |         |
  |-------|---------|
  </code></pre>
  
  <p>(and if the content in A or B is longer, its neighbor will grow to match its height)…</p>
  
  <p>without any additional markup?</p>
  
  <p>I understand that giving <code>.a</code> and <code>.b</code> a <code>display</code> value of <code>table-cell</code> would just make this one big row.</p>
  
  <p>What’s the solution?</p>