title: Responsive text width in LI with icon image
body: <p>I have a list of products that I want to display with a thumb icon
  on the left of each item.</p>
  
  <p>How can I have the product description display on the right without wrapping
  the text on smaller screens.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="cf"&gt;
        &lt;span id="customizeImage1" class="product-customize-image"&gt;&lt;/span&gt;
        &lt;div class="product-menu-txt"&gt;
          &lt;a href="/Product/Customize/769497"&gt;Friend Maker - Serves 8-10&lt;/a&gt;
          ($14.99)&lt;br&gt;
          6 Donuts&lt;br&gt;
          6 Bagel &amp;amp; Cream Cheese - 1 (8oz) tub&lt;br&gt;
          An assortment of our most favored varieties.
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>* {
    margin:0;
    padding:0;
    font-family: Tahoma,Sans-Serif;
  }
  
  .cf:before,
  .cf:after {
      content: " "; /* 1 */
      display: table; /* 2 */
  }
  
  .cf:after {
      clear: both;
  }
  
  /**
   * For IE 6/7 only
   * Include this rule to trigger hasLayout and contain floats.
   */
  .cf {
      *zoom: 1;
  }
  
  li {
    width: 100%;
    list-style-type: none;
    padding: 10px 0;
  }
  
  .product-customize-image {
    width:120px;
    height:120px;
    background:red;
    display:block;
    float:left;
    margin: 0 10px;
  }
  
  .product-menu-txt {
    float: left;
    width: 50%;
  }
  </code></pre>
  
  <p><a href="http://jsbin.com/girum/4/edit" rel="nofollow noreferrer">http://jsbin.com/girum/4/edit</a></p>
  
  <p><img src="https://i.stack.imgur.com/Hv3wW.png" alt="wrapped text on smaller screen"></p>
  
  <p><img src="https://i.stack.imgur.com/8c9Yk.png" alt="Text that fits the width of the row"></p>