JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://fonts.googleapis.com/css?family=Roboto"></script>
<hr>
<div class="container parent">
     <h1>The child</h1>

</div>
<br>
<br>
    
<hr>
<div class="container parent2">
     <h1>The child</h1>

</div>

CSS

*{font-family: 'Roboto', sans-serif;}
hr {
    margin:0; 
}
h1 {
    background:yellow;
    color:#000;
    padding: 4px;
}
.container {
    background: teal;
}

.parent2:before {
    content:'';
    display:table;
    clear:both; 
    margin-top: -1px;
    height: 0;
}