JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="masthead">
    <h1 id="siteName">logo del portal </h1>
    <div id="globalNav">
    Menu del portal 
</div>

</div>

<div id="navBar">
    <ul>
        <li>enlace 1</li>
        <li>enlace 2</li>
        <li>enlace 3</li>
    </ul>
</div>
<!--end navBar div -->

<div id="headlines">
    
    <p>bloque izquierdo pero está flotado a derecha ¿donde va realmente?</p>
     
</div>
<!--end headlines -->
<div id="content">

    <h2 id="title">El concepto</h2>

<p>Sus clientes suelen realizar muchas actividades en línea: realizan búsquedas, hacen compras, leen las noticias y navegan por sitios web interesantes. Por lo tanto, creemos que usted debe ser capaz de llegar a sus clientes, independientemente de lo que estén haciendo en la web. Nuestra respuesta: la Red de Google, el nombre que le damos a los lugares donde pueden aparecer sus anuncios de AdWords, incluidos los sitios de Google, las páginas web que se asocian con Google y otras ubicaciones, como las aplicaciones para teléfonos celulares. Es como si presentara su mensaje ante un estadio lleno de seguidores: Google reúne un grupo de personas interesadas y las lleva al estadio, y luego usted comienza con el espectáculo.
    </p>
    <p>
Este paquete de sitios que llamamos Red de Google se divide en grupos para brindarle más control sobre los lugares en donde le gustaría que apareciera su anuncio:
    </p>
</div>
<!--end content -->
<div id="siteInfo">pie </div>
<br />
</body>

CSS

#masthead{
    background:#f8c6A1;
    padding: 10px 0px 0px 0px;
    border-bottom: 1px solid #cccccc;
    width: 100%;
}

#navBar{

    background:#d8d8d8;
  float:left;
    width: 20%;
    border-left: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    padding-right: 10px;
    height:500px;
}

#headlines{
    background:#33d5ff;
      float:right;
    width: 20%;
    border-left: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    padding-right: 10px;
    height:500px;
}

#content{
    background: red;
    padding:10px;
}
#title{
    float:right;
    width: 20%;
    border-left: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    padding-right: 10px;
}
#content p{margin:10px;padding:20px;}
#siteInfo{background:#333;clear:both;}