How to make 2 spans inside div in one line so that content from next div doesn't go to the place of first div?
<p>You'll see that images from div <code>.second</code> go upper than last image from div <code>.first</code> so they go just in the next line from span <code>.text</code>. What can I do to make images from div <code>.second</code> to go in the next line from images of div <code>.first</code> and not in the next line of span <code>.text</code>?</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-html lang-html prettyprint-override"><code>&lt;div id="first" style="display: block;"&gt;
    &lt;span style="display: inline; float: left"&gt;
        &lt;div&gt;&lt;img width="300" height="225"&gt;&lt;/div&gt;
        &lt;div&gt;&lt;img width="300" height="225"&gt;&lt;/div&gt;
        &lt;div&gt;&lt;img width="300" height="225"&gt;&lt;/div&gt;
    &lt;/span&gt;
    &lt;span id="text" style="display: inline;"&gt;
        &lt;div&gt;some text&lt;/div&gt;
        &lt;div&gt;some text&lt;/div&gt;
        &lt;div&gt;some text&lt;/div&gt;
        &lt;div&gt;some text&lt;/div&gt;
    &lt;/span&gt;
&lt;/div&gt;
&lt;div id="second"&gt;
    &lt;div&gt;&lt;img width="300" height="225"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img width="300" height="225"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img width="300" height="225"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img width="300" height="225"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img width="300" height="225"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img width="300" height="225"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>