title: Two divs side-by-side without hardcoded widths
body: <p>I looked at few other questions about this but could not find one exactly matching my case. Here is fiddler I'm trying:</p>
  
  <p><em>HTML:</em></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="price"&gt;ABCDEF&lt;/div&gt;
      &lt;div class="text"&gt;
          Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text.
          Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text.
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>CSS:</em></p>
  
  <pre><code>.wrapper {
      color: white;
  }
  
  .text {
      background: red;
  }
  
  .price {
      float: right;
      background: blue;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/p1q3xy00/" rel="nofollow noreferrer">https://jsfiddle.net/p1q3xy00/</a></p>
  
  <p><img src="https://i.stack.imgur.com/t4wCz.png" alt="enter image description here"></p>
  
  <p>I need to make red div stop at the left edge of blue div and not have any text from red div underneath blue one. I also can't specify width for blue div explicitly it should be determined by its content. Is it possible? </p>