JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cadre1">
    <div id="cadre2">cadre2</div>
    <div id="cadre3">cadre3</div>
</div>
<p> du texte avant cadre 4 mais qui doit être en dehors
    de cadre1</p>
<div id="cadre4">cadre4</div>

CSS

div {
    border:1px solid black;
}

#cadre1 {
    border: solid 2px green;
    padding:10px 
}
#cadre2 {
    border: solid 1px #336699;
    margin-right:10px; 
    width:49%;
    float:left;  
}
#cadre3 {border: solid 1px red;}
#cadre4 {border: dotted 1px red;}

#cadre1, #cadre3 {
    /*contexte de formatage  afin de contenir les 
    flottants et aussi pour caler cadre3 */
    zoom:1;
    overflow:hidden;        
}