2 DIVs in 1 parent DIV
<p>I am trying to make 2 divs to stay side-by-side in one parent div, but with no succes. First time it worked partially good, with that I mean I had the image positioned in the DIV from the right, but after redimensioning things got messed up and I can't figure it out. I am beginner, so please make it simple.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div.surf2
{
 position:absolute;
 background: #41c3ac;
 height: 600px;
}

div.surfleft
{
 display: inline-block;
 width: 45%;
 padding-top: 80px;
 padding-left: 20px;
 height: 600px;
}

div.surf2right
{
 display: inline-block;
 height: 600px;
 width: 55%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="surf2"&gt;
    &lt;div class="surfleft"&gt;
     &lt;p class="title1"&gt;Interractive games&lt;/p&gt;
         &lt;ul style="font-size: 1.5em"&gt;
         &lt;li&gt;We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.&lt;/li&gt;
            &lt;li&gt;Those games are designed to help you learn and practice english combining fun with hard-working.&lt;/li&gt;   
          &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="surf2right"&gt;
    &lt;img src="console.png"&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>