html - Is there anything I can do to force an element onto the second column? -

as seen in picture above, have textarea, notes, , preview of current note. want do, force preview note onto second column, placeholder note located. cannot think of way current implementation, using css columns.

.notes {     // .notes container notes     column-gap: 12px;     column-fill: balance;     column-count: 5; } 

my html looks following

<div class="notes">     <div class="editor">...</div>     <div class="previewnote">...</div>      <div class="note">...</div>     <div class="note">...</div>     ... </div> 

i intentionally left out unrelated parts of css , html

personally use normal css , float elements.

div.notes div { width:50%; padding:0; margin:0; float:left; } 

and manually set ones want on right using float:right;

div.notes .previewnote { float:right; } 

sections display based first on whether floated right or left, , based on in html first. long div of class previewnote first div floated right in html, first 1 on right display.