JSFiddle - React, Tailwind, and code Playground

CSS Position I : Banner. 4 divs que ocupan todo. tienen la posición por defecto: static. Los divs se dibugan en el orden en el que se han definido en el documento. Ejemplo: banner,

by Yolanda Robles

HTML

<div id="container">
   <!--Alineados a la izquierda-->
    <div id="div1">Div 1</div>
    <div id="div2">Div 2</div>
    
    <!--Alineados a la derecha-->
    <div id="div4">Div 4</div>
    <div id="div3">Div 3</div>
</div>

CSS

#container
{
    width: 100%;
    height:100px;
    border: 2px solid red;
    background-color: yellow;
    overflow:hidden; /*para que oculte la parte que sobre sale de el div contenedor*/
}

#div1{
    
    padding:5px;
    width:90px;
    height:100px;
    background-color: green;
    float:left; /*para que vayan en línea*/
}
#div2{
    
    padding:5px;
    width:20px;
    height:100px;
    background-color: pink;
    float:left; /*para que vayan en línea*/
}
#div3{
    
    padding:5px;
    width:20px;
    height:100px;
    background-color: blue;
    float:right; /*para que vayan en línea*/
}
#div4{
    
    padding-top:5px;
    width:90px;
    height:100px;
    background-color: orange;
    float:right; /*para que vayan en línea*/
}