title: Is there anything I can do to force an element onto the second column?
body: <p><img src="https://i.stack.imgur.com/rJrYY.png" alt="enter image description here"></p>
  
  <p>As seen in the picture above, I have a textarea, some notes, and a preview of my current note. What I want to do, is <em>force</em> the preview note onto the second column, where the placeholder note is currently located. I cannot think of any way to do this with my current implementation, using css columns.</p>
  
  <pre><code>.notes {
      // .notes is the container for all notes
      column-gap: 12px;
      column-fill: balance;
      column-count: 5;
  }
  </code></pre>
  
  <p>My html looks somewhat like the following</p>
  
  <pre><code>&lt;div class="notes"&gt;
      &lt;div class="editor"&gt;...&lt;/div&gt;
      &lt;div class="previewNote"&gt;...&lt;/div&gt;
  
      &lt;div class="note"&gt;...&lt;/div&gt;
      &lt;div class="note"&gt;...&lt;/div&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p><em>I intentionally left out unrelated parts of the css and html</em></p>