JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <div id="pre_header">
        <div class="pre_header_content">
            <div id="pre_header_content_left">
            </div>
            <div id="pre_header_social_icons">
            </div>
            <div id="pre_header_content_right">
            </div>
        </div>
    </div>
</div>

CSS

#pre_header {
    width:1140px;
    height:30px;
    background-color:#202020;
    border-bottom:1px solid black;
}

#pre_header_content_left {
    float:left;
    width: 40%;
    height: 30px;
    background:blue
}


#pre_header_content_right {
    float:right;
    height:30px;
    width:15%;
    background:yellow;
}

.navigation_icons {
    padding-right:5px;
}

#pre_header_social_icons { 
    float:none;
    display:inline-block;
    line-height: 30px;
     margin: 0 auto;
    position:relative;
    width: 45%;
    height: 30px;
    background-color:red;
    text-align: center;

}
.header_social_icons {
    padding-left:5px;
    padding-right:5px;
}