Using CSS, how to create a two-column grid with equal-width columns that are "only as narrow as required"?
<p>Assuming I have a piece of HTML that is structured like this:</p>

<pre><code>&lt;!-- MY ACTUAL HTML --&gt;

&lt;div class="linkgrid"&gt;
  &lt;div class="gridentry"&gt;
    &lt;a href="#"&gt;Loooooooooooooong&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="gridentry"&gt;
    &lt;a href="#"&gt;Short&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="gridentry"&gt;
    &lt;a href="#"&gt;Meeeedium&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>...I'd like to make use of CSS to get a presentation that looks like this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* DEMONSTRATION-ONLY CSS */

table {
  table-layout: fixed;
}

td {
  width: 50%;
  padding: 1em;

  background-color: red;
  text-align: center;
}

td a {
  color: white;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- DEMONSTRATION-ONLY HTML --&gt;

&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;a href="#"&gt;Loooooooooooooong&lt;/a&gt;&lt;/td&gt;
    &lt;td&gt;&lt;a href="#"&gt;Short&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;a href="#"&gt;Meeeedium&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>

<p>Note that:</p>

<ol>
<li>The columns both have the same width.</li>
<li>The table does not have a fixed width (e.g. like 100% or 300px), i.e. it is only as wide as required to make sure that the content fits into its cells. (Or to put it differently: If there is only little content, the whole table will also be pretty narrow.)</li>
<li>The cell content will only wrap if it would make the whole grid too large to fit into the containing block (width-wise).</li>
<li>We have to assume that rows cannot be introduced in the HTML code. The semantics require the HTML code to be structured in this linear fashion. (However, we still need a grid design.)<sup>1</sup></li>
</ol>

<p>I was able to reach my goal with an almost CSS-only solution. However, because there does not seem to be an answer to <a href="https://stackoverflow.com/questions/34559771/using-css-how-to-add-a-pseudo-element-before-every-odd-child-element-that-is-o">Using CSS, how to add a pseudo element before every odd child element that is &quot;outside&quot; of that child element?</a> I hope to find a completely different approach to realize this with pure CSS.</p>

<p>So my question boils down to: Is there a CSS-only (= non-JavaScript) solution for my problem?</p>

<hr>

<p><strong>EDIT:</strong> <sup>1</sup> If it is required, we could add additional wrapping elements around each single element. However, we cannot wrap a group of elements.</p>

<p>So we could for example wrap each <code>gridentry</code>:</p>

<pre><code>&lt;div class="linkgrid"&gt;
  &lt;div class="wrapper"&gt;
    &lt;div class="gridentry"&gt;
      &lt;a href="#"&gt;Loooooooooooooong&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="wrapper"&gt;
    &lt;div class="gridentry"&gt;
      &lt;a href="#"&gt;Short&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="wrapper"&gt;
    &lt;div class="gridentry"&gt;
      &lt;a href="#"&gt;Meeeedium&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>But we cannot wrap groups of elements, so something like this would not be possible:</p>

<pre><code>&lt;div class="linkgrid"&gt;
  &lt;div class="wrapper"&gt;
    &lt;div class="gridentry"&gt;
      &lt;a href="#"&gt;Loooooooooooooong&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="gridentry"&gt;
      &lt;a href="#"&gt;Short&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="wrapper"&gt;
    &lt;div class="gridentry"&gt;
      &lt;a href="#"&gt;Meeeedium&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>