title: Span content over two divs
body: <p>I have the following code where I would like the text in the red div to respond/wrap around the yellow box. Is this even possible (ideally without JS)?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#div1 {
    float: left;
    width: 300px;
  }
  #div2 {
    float: left;
    width: 50%;
    background-color: blue;
  }
  #div3 {
    float: left;
    width: 50%;
    background-color: red;
  }
  p span {
    width: 250px;
    height: 50px;
    left: 20px;
    display: inline-block;
    clear: both;
    float: left;
    background-color: yellow;
    position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="div1"&gt;
    &lt;div id="div2"&gt;
      &lt;p&gt;Bonorum has. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at meis debet vulputate. No sed velit essent suavitate,
        &lt;span&gt;overlap me&lt;/span&gt; in pro decore ceteros temporibus, usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="div3"&gt;
      &lt;p&gt;Bonorum has. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at meis debet vulputate. No sed velit essent suavitate, in pro decore ceteros temporibus, usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi
        sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>