title: CSS method of filling remainder of paragraph with string of periods in a flex box layout?
body: <p>In the following snippet, is there a method of filling the remainder of the <code>span</code> from the word &quot;Paper&quot; up to the end of the row with <code>. . . . .</code>? I'd like it to automatically adjust for different view port widths.</p>
  <p>When it was guaranteed that all fit on one row, it was pretty easy to use three division within a flex box and flex the middle div with a dashed border bottom.  But when the paragraph can wrap to multiple lines, I don't see how to make  flexible width span to fill the remaining space of the last row only.</p>
  <p>Thank you.</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>div {
    display: flex;
    border: 0.1rem solid black;
    max-width: 300px;
    justify-content: space-between;
    align-items: end;
  }
  
  div &gt; p:first-child {
    flex: 1 1;
  }
  
  div &gt; p:last-child {
    flex: 0 0;
  }
  
  div &gt; p &gt; span {
    margin-left: 1.0rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;p&gt;This is a long title that spans two lines in the container.&lt;span&gt;Paper&lt;/span&gt;&lt;p&gt;
    &lt;p&gt;.75&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>