title: How to make an element fill the remaining space of the last line of a multi-line paragraph with CSS?
body: <p>There have been many questions about how to fill space with CSS, <a href="https://stackoverflow.com/q/1032914/2854284">this</a> being the main one I think. These days flexbox provides a great and easy solution. However, it doesn't let you fill the remaining space of a multi-line paragraph. To be clear, this what I want:</p>
  <blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel scelerisque purus, et ultricies sapien. Donec mi augue, pulvinar at mauris sit amet, ultricies molestie nisi. Cras et nisi lobortis. <strong>FILL FROM HERE TO THE END -&gt;</strong></p>
  </blockquote>
  <p>I found <a href="https://stackoverflow.com/q/57097128/2854284">one question asking the same</a>, however it fills space with a CSS <code>content</code> rule, and I need to be able to fill it with an element (specifically an <code>&lt;input&gt;</code>, if that matters.)</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-html lang-html prettyprint-override"><code>&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Quisque vel scelerisque purus, et ultricies sapien. Donec mi
  augue, pulvinar at mauris sit amet, ultricies molestie nisi.
  Cras et nisi lobortis.
  &lt;input type="text"&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>My current solution is to add a span between the end of the text and the <code>&lt;input&gt;</code>, measure it's position, and manually set a width, however that requires me to listen for browser resize events and recalculate the width. If it was possible to do this entirely within CSS, that would be great. If extra elements have to be added that's fine.</p>