title: How to make div stacked in two columns and have the left column smaller than the right one?
body: <p>I want to make a stack of div divided in two columns in a view which is a A4 (21x29.7cm) document. The 2nd column must bes used when the 1st one is full, <strong>this is an important requirement</strong>.</p>
  <p>The result I am trying to achieve must look as the following captures:</p>
  <p><a href="https://i.stack.imgur.com/tUiVy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tUiVy.png" alt="enter image description here" /></a></p>
  <p>And this one :</p>
  <p><a href="https://i.stack.imgur.com/G7v4g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G7v4g.png" alt="enter image description here" /></a></p>
  <p>I have tested using the <code>column-count</code> css property on W3C <a href="https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_column-count" rel="nofollow noreferrer">here</a></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;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt; 
  .newspaper {
    column-count: 2;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h1&gt;The column-count Property&lt;/h1&gt;
  &lt;p&gt;The column-count property defines the number of columns an element is divided into:&lt;/p&gt;
  
  &lt;div class="newspaper"&gt;
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But this method doesn't allow me to set the column width and the stack.</p>
  <blockquote>
  <p>Reminder: It is important that I use only one div to stack the content, and if it goes at the end of the page/div, then write in the second column =&gt; it has to stack</p>
  </blockquote>
  <p>I have also tried the following structure using flex, since my requirements is to stack <code>div</code> and divide in two columns, the second column MUST be used when the left one is full.</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>.container {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      align-content: flex-start;
      border: dotted 1px #f00;
      height: 7rem;
      overflow: hidden;
  }
  
  .item {
      width: 50%;
      height: 1rem;
      border: dotted 1px #0f0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;div class="item"&gt;a&lt;/div&gt;
      &lt;div class="item"&gt;b&lt;/div&gt;
      &lt;div class="item"&gt;c&lt;/div&gt;
      &lt;div class="item"&gt;d&lt;/div&gt;
      &lt;div class="item"&gt;e&lt;/div&gt;
      &lt;div class="item"&gt;f&lt;/div&gt;
      &lt;div class="item"&gt;g&lt;/div&gt;
      &lt;div class="item"&gt;h&lt;/div&gt;
      &lt;div class="item"&gt;i&lt;/div&gt;
      &lt;div class="item"&gt;j&lt;/div&gt;
      &lt;div class="item"&gt;k&lt;/div&gt;
      &lt;div class="item"&gt;l&lt;/div&gt;
      &lt;div class="item"&gt;m&lt;/div&gt;
      &lt;div class="item"&gt;n&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <blockquote>
  <p>I can change the structure but it has to be a stack, I also can involve some JavaScript.</p>
  </blockquote>
  <blockquote>
  <p>The height is set for the sake of the example, however, only the <code>div.container</code> will have a fixed height.</p>
  </blockquote>
  <p>For example:</p>
  <ul>
  <li>This is not good:  <a href="https://jsfiddle.net/ohqb9p71/" rel="nofollow noreferrer">https://jsfiddle.net/ohqb9p71/</a></li>
  <li>This is almost good except I can't set columns width: <a href="https://jsfiddle.net/ThePendulum/8wnhyvx7/" rel="nofollow noreferrer">https://jsfiddle.net/ThePendulum/8wnhyvx7/</a></li>
  </ul>
  <p>I want to add content to a <code>div</code> and fill the left column, more content should go to the right column.</p>
  <ul>
  <li>How can I make the left column 30% and right 70% using HTML/CSS or JS?</li>
  <li>Without using <code>column-*</code> or <code>flex</code> css properties, how can I make a <code>&lt;div&gt;</code> that stack in two columns?</li>
  </ul>