JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header-container">
    <div id="header-top-container">

      <div id="header-logo">
        <a href="/GlobalImagens/pages/imagens.xhtml?categoria=ultima-hora">
          <img src="../resources/images/logo_globalimagens.jpg" alt="Global Imagens"></a>
      </div>

      <div class="header-top-right-corner">
        <form id="language" name="language" method="post" action="/GlobalImagens/pages/imagens.xhtml" enctype="application/x-www-form-urlencoded">
          <input name="language" value="language" type="hidden">

          <div id="newsletter" class="newsletter">
            <a href="http://72.e-goi.com/w/Te1LetVmefgyM9g90LOh" target="_blank" style="font-size: 10px;">Subscrever Newsletter</a>
          </div>

          <div style="float: right; padding-left: 6%;">
            <script type="text/javascript" src="/GlobalImagens/javax.faces.resource/jsf.js.xhtml?ln=javax.faces&amp;stage=Development"></script>
            <a href="#" style="text-decoration:none; " onclick="mojarra.jsfcljs(document.getElementById('language'),{'language:j_idt31':'language:j_idt31','localeCode':'en'},'');return false">
              <img src="../resources/images/flag_uk.jpg" border="0"></a>
          </div>

          <div style="float: right;">
            <a href="#" style="text-decoration:none;" onclick="mojarra.jsfcljs(document.getElementById('language'),{'language:j_idt35':'language:j_idt35','localeCode':'pt'},'');return false">
              <img src="../resources/images/flag_pt.jpg" border="0"></a>
          </div>
          <input name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="215900126811062761:3093351618596041247" autocomplete="off" type="hidden">
        </form>
      </div>

      <div id="admin-container">

        <div>
          <span class="admin-menu1" style="padding-left: 1.5%;"><a href="/GlobalImagens/pages/entrar.xhtml" title="Iniciar Sessão">Iniciar Sessão</a>
					</span>
          <span class="dotted-separator"></span>
        ...

CSS

/*tables header*/

.admin-menu1 {
  padding-right: 1.5%;
}

.dotted-separator {
  border: none;
  border-left: 1px dotted #83256f;
  color: #fff;
  /*   background-color:#dadada;
  height:17px;
  width:0%;
  margin: 0%; */
}

.admin-menu2 {
  padding-left: 10px;
  background: url(../images/background_dot.jpg) no-repeat right;
}

.admin-menu-logged-in-3 {
  padding-left: 1.5%;
}

.admin-menu3 {
  /* width: 75px; */
}

.admin-menu4 {
  /* 	width: 28px; */
}

/*******************************HEADER*******************************/

#header-container {
  /* height: 180px; */
  /* float: left; */
}

#header-top-container {
  /* 	width: 983px; */
  /* height: 100px; */
  /* float: left; */
}

#header-logo {
  padding-top: 1%;
  float: left;
}

#header-logo img {
  border: none;
  border-style: none;
}

.newsletter {
  float: left;
  padding-top: 1%;
}

.header-top-right-corner {
  float: right;
  padding-top: 1%;
  width: 11%;
}

#admin-container {
  padding-top: 1%;
  font-size: 10px;
  clear: right;
  float: right;
  box-sizing: border-box;
}

#admin-container a {
  text-decoration: none;
  color: #493641;
}

#admin-container a:hover {
  text-decoration: underline;
}