title: <span> overlapping strings in a paragraph
body: <p>Let's say I have text like:</p>
  
  <pre><code>&lt;p&gt;There are many people in Asia.&lt;/p&gt;
  </code></pre>
  
  <p>I want to match two strings: <code>many people</code>, and <code>people in Asia</code>. I want the output to look like both strings were found independently, perhaps applying a different colored underline to each matched string, like so:</p>
  
  <p><img src="https://i.stack.imgur.com/hdRYy.png" alt="Lots of asians"></p>
  
  <p>But, in HTML I can't overlap spans because if I tried this:</p>
  
  <pre><code>span.first { border-bottom: 1px solid red; }
  span.second { border-bottom: 1px solid blue; }
  
  &lt;p&gt;There are 
      &lt;span class="first"&gt;many &lt;span class="second"&gt;people&lt;/span&gt; in Asia&lt;/span&gt;.
  &lt;/p&gt;
  </code></pre>
  
  <p>the first <code>&lt;/span&gt;</code>would close <code>span.second</code>. </p>
  
  <p>My thought is to position <code>div</code>s underneath the text such that they line up with the matched text in the <code>p</code> above, but I bet aligning those divs with the start and end positions of the matched strings using CSS would be a nightmare.</p>
  
  <p>Any thoughts on how to do this? </p>