HTML CSS layout pushing elements down the page : <p>I have this HTML </p>

<pre><code>&lt;div class="container"&gt;
&lt;div class="one"&gt;&lt;/div&gt;
&lt;div class="two"&gt;&lt;/div&gt;
&lt;div class="three"&gt;&lt;/div&gt;
&lt;div class="four"&gt;&lt;/div&gt;
&lt;div&gt;
</code></pre>

<p>and I'm trying to create this layout</p>

<p><a href="https://i.stack.imgur.com/18DNo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/18DNo.png" alt="enter image description here"></a></p>

<p>1, 3 and 3 are set to display block and width of 33%.
4 is set to inline-block and width of 60%</p>

<p>The layout appears as I want it to but as I add content to 4, it pushes 1, 2 and 3 down the page so it's not top aligned.</p>

<p>Any help is much appreciated</p>
