JSFiddle - React, Tailwind, and code Playground

HTML

<section id="foo">
    <header>Foo</header>
    <article>
        <div class="main one"></div>
        <div class="main two"></div>
    </article>
</section>    

<div style="clear:both">Clear won't do.</div>

<section id="bar">
    <header>bar</header>
    <article>
        <div class="main one"></div><div></div>
        <div class="main two"></div>
    </article>
</section>

CSS

* { text-align: center; }
article {
    height: fit-content ;
    display: flex;
		justify-content: space-between;
		flex-flow: row wrap;
    background: whitesmoke;
}
article div { background: yellow;     margin:20px;
    width: 30px;
    height: 30px;
display: flex;
    }

.one {
    background: red;
}

.two {
    background: blue;
}