White-Space: Nowrap float issue
<p>I have what is hopefully a simple problem that I'm just overcomplicating in my mind. </p>

<p><a href="https://jsfiddle.net/jdcutter/3sc3qeL5/21/" rel="nofollow noreferrer">Here is a Fiddle to demonstrate my issue.</a></p>

<p>In the Fiddle above you will see a flyout menu setup. On the top option you will see an enlarged first option that has a broken float. This is where my issue is. <strong>I need those elements to float alongside each other without breaking the list container holding them.</strong> </p>

<p>I understand that the <code>white-space:nowrap</code> is causing the break of that containers space, however, whenever I try and remove that element I can't seem to get my float to honor. I'm sure this is a simple miss on my part due to thinking of things that will be surrounding it, but any advancement on this is appreciated and hopefully an easy up for someone. </p>

<p><strong>CSS:</strong> </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

#nav{margin:0;padding:0;position:relative;float:left;}
#nav li {list-style:none;}
#nav a {
    color:#fff;
    display:block;
    line-height:2.4;
    padding:0 1em;
    text-decoration:none; 
    border-bottom:1px solid #eee;
}
      /* FLYOUT */
      .sub  {
        top:0;
        margin:0;
        padding:0;
        left:100%;
        display:none;
        min-height:100%;
        position:absolute;
        white-space:nowrap;
        border-left:2px solid #eee;
      }
      #nav li:hover .sub {
        display:block;
      }

        #nav li:hover .sub .sub {
          display:none;
        }

          #nav .sub li:hover .sub{
            display:block;
          }

      .sub a:hover {
        color:#fff;
        background:#333; 
      }
      
      .sub img { min-width:120px; float:left; }
      .sub .content { float:left; }


/*-- COLORS NOT NEEDED ON LIVE--*/
.first{background:#aaa;}
.second {background:#bbb;}
.third {background:#ccc;}
.fourth {background:#ddd;}
.fifth {background:#aaa;}
.sixth {background:#bbb;}
.seventh {background:#ccc;}
.eighth {background:#ddd;}
.nineth {background:#aaa;}
.tenth {background:#bbb;}
.all {background:#000}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="nav"&gt;
    &lt;li&gt;&lt;a class="first" href="#"&gt;Level 1 Option&lt;/a&gt;
      &lt;ul class="sub first"&gt;   
          &lt;li class="clearfix"&gt;&lt;a href="#"&gt;
            &lt;div class="float"&gt;
            &lt;img src="https://placeholdit.imgix.net/~text?txtsize=20&amp;txt=120%C3%9780&amp;w=120&amp;h=80" alt=""&gt;&lt;/div&gt;
            &lt;div class=""&gt;
              &lt;h5&gt;This will be a title&lt;/h5&gt;
              &lt;p&gt;
                &lt;strong&gt;Sub-title&lt;/strong&gt;&lt;br&gt;
                Specs&lt;br&gt;
                &lt;strong&gt;Sub-title&lt;/strong&gt;&lt;br&gt;
                Specs
              &lt;/p&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;ul class="sub first"&gt;   
              &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;  
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;
            &lt;ul class="sub first"&gt;   
              &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;  
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
    &lt;li&gt;&lt;a class="second" href="#"&gt;Level 1 Option&lt;/a&gt;
      &lt;ul class="sub second"&gt;   
        &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a class="third" href="#"&gt;Level 1 Option&lt;/a&gt;
      &lt;ul class="sub third"&gt;   
        &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a class="fourth" href="#"&gt;Level 1 Option&lt;/a&gt;
      &lt;ul class="sub fourth"&gt;   
        &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;&lt;/li&gt;        
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a class="fifth" href="#"&gt;Level 1 Option&lt;/a&gt;
      &lt;ul class="sub fifth"&gt;   
        &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;&lt;/li&gt;        
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a class="sixth" href="#"&gt;Level 1 Option&lt;/a&gt;
      &lt;ul class="sub sixth"&gt;   
        &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;&lt;/li&gt;        
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a class="seventh" href="#"&gt;Level 1 Option&lt;/a&gt;
      &lt;ul class="sub seventh"&gt;   
        &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;&lt;/li&gt;        
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a class="eighth" href="#"&gt;Light Duty&lt;/a&gt;
      &lt;ul class="sub eighth"&gt;   
        &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;&lt;/li&gt;        
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a class="ninth" href="#"&gt;Level 1 Option&lt;/a&gt;
      &lt;ul class="sub ninth"&gt;   
        &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;&lt;/li&gt;        
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a class="tenth" href="#"&gt;Level 1 Option&lt;/a&gt;
      &lt;ul class="sub tenth"&gt;   
        &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;&lt;/li&gt;        
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a class="all" href="#"&gt;View All&lt;/a&gt;
    &lt;/li&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>