title: Text overflow with image float option
body: <p>Well, i tried to place the picture on left, with float option, and no text should appear below the first image, until the bottom border. How can I achieve this?
  (I make the text long, because I need to consider different resolutions of different computer screens, it may wrap)</p>
  
  <p>And another problem, the second image, I wanted its <code>left side</code> to be aligned with the <code>right side</code> of the first one, is that possible?</p>
  
  <p>HTML is here:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt; This is an demo &lt;/title&gt;
          &lt;style&gt;
              .left { 
                  float: left; 
              }
              .content {
                  clear: both;
                  border-color: #666666;
                  border-bottom: 3px solid;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="content"&gt;
              &lt;img class="left" src="61add42atw1dnf1k4h4qzj.jpg" /&gt;
              &lt;p&gt; ThiThis is a not so long parThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphagraphs is a not so long parThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphagraph&lt;/p&gt;
              &lt;img src="61ab8006jw1dnfas8bvj9j.jpg" /&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/MnTzg.png" alt="enter image description here"></p>