JSFiddle - React, Tailwind, and code Playground

by GolezTrol

HTML

<div class="columnwrapper">
<p>aaaa aaaaaaaa aaaaaaaaaa aaaaaaaaaaaa aaaa aa aaaaa aaaa aa aaaaaaaaaaa aaa aa aaaa aa</p>
<p>bbbbbbbbb bbb bb bbbb bbbbbb bb bb bbbbb bbbbbb bbbb bbbbbb bbbbbbb</p>
<p>c</p>
<p>d</p>
<p>e</p>
<p>f</p>
<p>g</p>
<p>h</p>
<p>i</p>
<p>j</p>
<img src"">
<p>k</p>
<p>l</p>
<p>m</p>
<p>n</p>
<p>o</p>
<p>p</p>
<p>q</p>
<p>r</p>
<p>s</p>
<p>t</p>
<p>u</p>
<p>v</p>
<p>w</p>
<p>x</p>
<p>y</p>
<p>z</p>
</div>

CSS

.columnwrapper {
  column-count: 2;
  column-rule: 2px solid blue;    
  -moz-column-count: 2;
  -moz-column-rule: 2px solid blue;    
  -webkit-column-count: 2;
  -webkit-column-rule: 2px solid blue;    
}

.columnwrapper img {
    column-span: 2;
}