title: align wrapped large line of different width links without using a table
body: <p>I have a long list of links. As long as all displayed texts for the links are the same width (they are mostly) they display in columns and reorder when the screen is resized. The nicely aligned columns are disturbed when there's a link in the list with a different width.</p>
  
  <p>All same width:</p>
  
  <pre><code>Chapter 01   Chapter 02   Chapter 03
  Chapter 04   Chapter 05   Chapter 06
  Chapter 07 ... etc.
  </code></pre>
  
  <p>Browser window smaller::</p>
  
  <pre><code>Chapter 01   Chapter 02
  Chapter 03   Chapter 04
  Chapter 05   Chapter 06
  Chapter 07 ... etc.
  </code></pre>
  
  <p>(To avoid wrapping between "Chapter" and the number there's a nbsp between those.)</p>
  
  <p>If the browser width is changed the list reorders in more or less columns but stays perfectly aligned, exactly what I want. The problem starts when for example a "Prologue" or "Interlude" occurs in the list. The width of "Prologue" is different from the width of each 'Chapter XX' and it kills the nicely aligned columns:</p>
  
  <pre><code>Prologue   Chapter 01   Chapter 02
  Chapter 03   Chapter 04   Chapter 05
  Chapter 06   Interlude   Chapter 07
  Chapter 08   Chapter 09   Chapter 010
  </code></pre>
  
  <p>This can't be solved with a table because that would require a fixed number of columns and columns wouldn't wrap keeping the order of the links intact. The same for bootstrap columns. With those the last link on a line is not wrapped as the first on a new line when the screen width decreases.</p>
  
  <p>It could be solved using a monospace font and make each displayed chapter the same number of characters but I really would like to keep the base font that is used for the rest of the page. Monospace fonts just don't look very good. I tried filling out shorter width links with nbsp's but that doesn't solve the problem like it should. With enough spaces it comes close but just a little difference in alignment is even worse. I tried some suggestions where the links are all forced to the same width but I haven't found one that works 100% correct.
  I also tried putting 'Prologue' on a separate line but there are too many possibilities to make that a viable solution. (A multitude of different names before, after, and in the middle between chapters.)</p>
  
  <pre><code>&lt;!-- Nicely aligned --&gt;
  &lt;div class="index-list"&gt;
      &lt;a href="chapter001.html"&gt;Chapter&amp;nbsp;01&lt;/a&gt;
      &lt;a href="chapter002.html"&gt;Chapter&amp;nbsp;02&lt;/a&gt;
      &lt;a href="chapter003.html"&gt;Chapter&amp;nbsp;03&lt;/a&gt;
      &lt;a href="chapter004.html"&gt;Chapter&amp;nbsp;04&lt;/a&gt;
      &lt;a href="chapter005.html"&gt;Chapter&amp;nbsp;05&lt;/a&gt;
      &lt;a href="chapter006.html"&gt;Chapter&amp;nbsp;06&lt;/a&gt;
      &lt;a href="chapter007.html"&gt;Chapter&amp;nbsp;07&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;!-- Not nicely aligned --&gt;
  &lt;div class="index-list"&gt;
      &lt;a href="prologue.html"&gt;Prologue&lt;/a&gt;
      &lt;a href="chapter001.html"&gt;Chapter&amp;nbsp;01&lt;/a&gt;
      &lt;a href="chapter002.html"&gt;Chapter&amp;nbsp;02&lt;/a&gt;
      &lt;a href="chapter003.html"&gt;Chapter&amp;nbsp;03&lt;/a&gt;
      &lt;a href="chapter004.html"&gt;Chapter&amp;nbsp;04&lt;/a&gt;
      &lt;a href="chapter005.html"&gt;Chapter&amp;nbsp;05&lt;/a&gt;
      &lt;a href="chapter006.html"&gt;Chapter&amp;nbsp;06&lt;/a&gt;
      &lt;a href="chapter007.html"&gt;Chapter&amp;nbsp;07&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there a way to keep the links aligned in columns without using a monospace font, tables, bootstrap columns? A correct way to force the links to the same width is ok but it has to be scalable since the user has the ability to change the font-size. A solution that allows "Chapter 1" instead of "Chapter 01" and keeps the alignment would be perfect.</p>