JSFiddle - React, Tailwind, and code Playground

HTML

<article id="container" style="width: 500px; height: 900px; background: grey; display: block;">
    
     <div style="clear:both; border: solid 1px black; ">
        <h1>Child divs defined with whitespace between their tags = a space is renderd between the divs</h1>      
    </div>
    
    <section class="left child" style="width: 50%">1</section>
    <section class="right child" style="width: 49%">2</h1></section>
    
    <div style="clear:both; border: solid 1px black; ">
         <h1>Child divs defined WITHOUT any whitespace between their tags = no space rendered between them</h1>            
    </div>
    
        <section class="left child" style="width: 49%">3</section><section class="right child" style="width: 50%">4</section>
</article>

CSS

/*This SHOULD remove all the margins and paddings but apparently does not...*/
* { margin: 0!important; padding: 0!important; }

.child { display: inline-block; height: 100px; }
.left { background: yellow;}
.right {background: orange;}