title: How to make html elements flow like text
body: <p>Given I have two (or more) elements, ーlet's use <code>div</code> but they can be <code>span</code> or anything...ー I want the second one to be appended to the first one the same way it would happen with text.</p>
  <p>HTML:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;First element taking space&lt;/div&gt; &lt;div&gt;Second element&lt;/div&gt;
  </code></pre>
  <p>What I want:</p>
  <pre><code>//&lt;------ 1. parent width big enough --------&gt;
  First element taking space Second element
  
  //&lt;---- 2. bit smaller width ------&gt;
  First element taking space Second
  element
  
  //&lt;- 3. even smaller -&gt;
  First element taking
  space Second element
  </code></pre>
  <p>What it happens</p>
  <pre><code>//&lt;------ 1. parent width big enough --------&gt;
  First element taking space Second element
  
  //&lt;---- 2. bit smaller width ------&gt;
  First element taking space          // even if there's space for the &quot;Second&quot; word in
  Second element                      // the 1st line it starts in the next line
  
  //&lt;- 3. even smaller -&gt;
  First element taking      // even if there's space for the &quot;Second element&quot; full text
  space                     // it starts in a new line
  Second element
  </code></pre>
  <p>This is probably due to the &quot;box&quot; assigned to each element, behaving like this</p>
  <pre><code>╔══════════════════════╗
  ║╔════════════════════╗║
  ║║First element taking║║
  ║║space               ║║
  ║╚════════════════════╝║
  ║╔══════════════╗      ║
  ║║Second element║      ║
  ║╚══════════════╝      ║
  ╚══════════════════════╝
  </code></pre>
  <p>I tried playing with <code>display</code> options (<code>inline</code>, <code>inline-block</code>, <code>flex</code>), <code>white-space</code> (<code>wrap</code>, <code>pre-wrap</code>)... but can't make it work as I want.</p>
  <p>Note: the <code>pre-wrap</code> is because I want to preserve spaces as well.</p>
  <p><strong>Edit:</strong> Added the following snippet with current code:</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>.root {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    background: pink;
  }
  
  .prefix {
    white-space: pre-wrap;
  }
  
  .text {
    white-space: pre-wrap;
  }
  
  .colored {
    background: red;
  }
  
  .big { width: 500px; }
  .small { width: 320px; }
  .smaller { width: 150px; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="root"&gt;
    &lt;div class="prefix"&gt;1.&amp;gt; &lt;/div&gt;
    &lt;div class="text"&gt;this is some text of arbitrary width &lt;/div&gt;
    &lt;div class="text colored"&gt;colored text&lt;/div&gt;
    &lt;div class="text"&gt; more text&lt;/div&gt;
  &lt;/div&gt;
  &lt;hr/&gt;
  &lt;div class="root small"&gt;
    &lt;div class="prefix"&gt;2.&amp;gt; &lt;/div&gt;
    &lt;div class="text"&gt;this is some text of arbitrary width &lt;/div&gt;
    &lt;div class="text colored"&gt;colored text&lt;/div&gt;
    &lt;div class="text"&gt; more text&lt;/div&gt;
  &lt;/div&gt;
  &lt;hr/&gt;
  &lt;div class="root smaller"&gt;
    &lt;div class="prefix"&gt;3.&amp;gt; &lt;/div&gt;
    &lt;div class="text"&gt;this is some text of arbitrary width &lt;/div&gt;
    &lt;div class="text colored"&gt;colored text&lt;/div&gt;
    &lt;div class="text"&gt; more text&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>