title: Using CSS for results lists with different vertical heights
body: <p>I'm hoping to make a results list that looks like this:<img src="https://i.stack.imgur.com/YjRQf.png" alt="results with different heights"></p>
  
  <p>I used to do that with tables way back when, but always struggle to figure out how to do this with css. What if the description is really long, how do I keep it from wrapping under the image and name/title? This seems harder in CSS than tables, but maybe I'm just missing something. I know tables aren't responsive, which is why I'd like to do it with divs. I just can't stop the text from wrapping.</p>
  
  <p>My HTML is this:</p>
  
  <pre><code>            &lt;div class="speaker"&gt;
  
              &lt;div class="speaker-photo"&gt;
  
              &lt;img src="&lt;?php echo $image[0]; ?&gt;" /&gt;
              &lt;div class="speaker-name"&gt;&lt;?php echo $first_name .' '.$last_name; ?&gt;&lt;/div&gt;
              &lt;div class="speaker-title"&gt;&lt;?php echo $title; ?&gt;&lt;/div&gt;  
  
              &lt;/div&gt;
  
              &lt;div class="bio"&gt;&lt;?php echo $bio ?&gt;&lt;/div&gt; 
  
              &lt;/div&gt;
  
              &lt;br style="clear:both;"/&gt;
  </code></pre>
  
  <p>and the CSS is:</p>
  
  <pre><code>.speaker {
      margin-bottom: 33px;
  }
  
  .speaker-photo  {
      float:left;
      width: 25%;
  }
  
  .speaker-photo img {
      max-width: 170px;
      height:auto;
  }
  
  .speaker-bio {
      max-width:600px;
  
  }
  </code></pre>
  
  <p>Thanks!</p>