JSFiddle - React, Tailwind, and code Playground

by David Storey

HTML

<article>
    <header>
         <h1>If I span both columns, this test fails</h1>

    </header>
    <p>Pellentesque ullamcorper sapien ut libero dignissim, eu fermentum neque convallis. Donec ipsum neque, hendrerit sit amet nisi eu, feugiat hendrerit erat. Maecenas tempus tempor nisi, vitae volutpat odio luctus sed. Sed vel tincidunt tortor. Duis lacinia condimentum augue sit amet porta. Proin ultricies lorem mauris, eget vulputate nisi iaculis in. Donec et quam imperdiet felis vulputate blandit nec a lectus. Proin ante tellus, pulvinar eget nulla quis, rutrum faucibus nulla. Nulla et nisl enim. Donec lobortis viverra iaculis. Vestibulum feugiat congue dolor, eu vehicula elit rutrum vitae. Quisque lectus est, facilisis sed fringilla a, porta vitae turpis. Aliquam tortor turpis, elementum at ante a, vulputate mollis erat.</p>
</article>

CSS

article {
    column-count: 2;
}
header {
    /* set column-span to not default */
    column-span: all;
    /* override previous. If none supported this will be ignored */
    column-span: none;
}