title: CSS: Positioning sibling elements in 2 columns and 3 rows
body: <p>I'm trying to position 4 sibling elements so that the first will take up half the width of the parent element, and the other 3 will take up the rest, positioned below each other.
  The easy fix would be to wrap the last 3 in a parent element but this is sadly impossible since this is for a web application of which I cannot change the HTML</p>
  
  <p>I've tried every positioning trick I know of but nothing seems to work.</p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;div class="child1"&gt;&lt;/div&gt;
      &lt;div class="child2"&gt;&lt;/div&gt;
      &lt;div class="child3"&gt;&lt;/div&gt;
      &lt;div class="child4"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like the elements to be positioned like this:</p>
  
  <p>|-------|-------|<br>
  |        |    2     |<br>
  |        |-------|<br>
  |   1   |   3    |<br>
  |        |-------|<br>
  |        |   4    |<br>
  |-------|-------|<br></p>
  
  <p>See code for an example of how the positioning should look.</p>