JSFiddle - React, Tailwind, and code Playground

HTML

<header id="head_Main">
          <section id="head_Wrap">
             <article id="head_Logo">
                LOGO
             </article>
			 
			 <div id="ticker-menu-block">
    
             <article id="head_Info">
                <ul id="head_News">
                   <li>NEWS TICKER</li>
                </ul>
             </article>
			 
			<article id="head_Menu">
                <nav>
                   <ul>
                      MENU
                   </ul>
                </nav>
             </article>
			 </div>
    
             <article id="head_Note">
                MSGS
             </article>
    

    
          </section>
       </header>

CSS

body
{
   color: #CF6;
   margin: 0 auto;
   font-size: 1.0em;
   max-width: 1280px;
   overflow-y: scroll;
   text-transform: uppercase;
   font-family: "Tahoma", Verdana, sans-serif;
   background: black;
}

#head_Main
{
   height: 112px;
   margin-bottom: -112px;
   border: 2px solid #444;
}

#head_Wrap
{
   width: 92%;
   display: flex;
   margin: 0 auto;
   xmin-width: 40em;
   max-width: 84em;
   flex-flow: row wrap;
   border: 1px solid orange;
}

#head_Logo
{
   top: 0;
   left: 0;
   width: 77px;
   height: 112px;
   border: 1px solid red;
}

#head_Info
{
   top: 0;
   flex:1;
   color: #0FF;
   height: 45px;
   display: block;
   min-width: 12em;
   font: normal 125%/45px Arial, Helvetica, sans-serif;
}

#head_News
{
   font-weight: 700;
   padding-right: 5px;
   border: 1px solid green;
    margin-top: 0;
}

#head_Note
{
   top: 0;
   width: 77px;
   height: 112px;
   border: 1px solid cyan;
}

#head_Menu
{
   flex: auto;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid blue;
}

.ticker-menu-block {
   display: flex;
   flex-direction: column;
}