title: table cell, wrapped text, fit width to content, remove extra right hand white space
body: <p>I have a set width table container, it will contain 3 text elements separated by single characters (&gt;).
  These text elements may contain text that cannot be fit in the container on a single line along with the rest, and must be wrapped.</p>
  <p>The issue is when the text wraps, the cell will contain extra white space on the right hand side that then forces the other elements to wrap, where normally, without the white space, the succeeding elements would each fit on a single line.</p>
  <p>Here is the desired behavior:</p>
  <p><a href="https://i.stack.imgur.com/99CUk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/99CUk.png" alt="enter image description here" /></a></p>
  <p>Where the first text element cannot fit on a single line and must wrap.</p>
  <p>But any of the other text elements may also not fit on a single line and must wrap, leaving no extra white space.</p>
  <p>Using a basic table layout:</p>
  <pre><code>&lt;table class=&quot;table&quot;&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;Membership Clubs and Organizations&lt;/td&gt;
        &lt;td&gt;&gt;&lt;/td&gt;
        &lt;td&gt;Books Wholesaler&lt;/td&gt;
        &lt;td&gt;&gt;&lt;/td&gt;
        &lt;td&gt;Music Management&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <pre><code>.table {
    width:450px;
    border:1px solid black;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/aHG4I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aHG4I.png" alt="enter image description here" /></a></p>
  <p>Here there is extra whitespace, causing the succeeding elements to also wrap.</p>
  <p>After a lot of research, the closest i have come is by setting width:0.1% for the text elements.
  Unfortunately this results in the separating characters having their own extra white space, which i have not been able to remove, i have been unable to reduce their width to fit their contents.</p>
  <pre><code>&lt;table class=&quot;table&quot;&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td class=&quot;text&quot;&gt;Membership Clubs and Organizations&lt;/td&gt;
        &lt;td class=&quot;separator&quot;&gt;&gt;&lt;/td&gt;
        &lt;td class=&quot;text&quot;&gt;Books Wholesaler&lt;/td&gt;
        &lt;td class=&quot;separator&quot;&gt;&gt;&lt;/td&gt;
        &lt;td class=&quot;text&quot;&gt;Music Management&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <pre><code>.text {
    width:0.1%;
  }
  .table {
    width:450px;
    border:1px solid black;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/E7sx9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E7sx9.png" alt="enter image description here" /></a></p>
  <p>I settled on using tables because it got me closer to what i need, but i am open to use any format, the only requirement is that it be in pure css, and not use any javascript.</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>.text {
    width:0.1%;
  }
  .table {
    width:450px;
    border:1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="table"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td class="text"&gt;Membership Clubs and Organizations&lt;/td&gt;
        &lt;td class="separator"&gt;&gt;&lt;/td&gt;
        &lt;td class="text"&gt;Books Wholesaler&lt;/td&gt;
        &lt;td class="separator"&gt;&gt;&lt;/td&gt;
        &lt;td class="text"&gt;Music Management&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>