JSFiddle - React, Tailwind, and code Playground
HTML
<div id="header" class="header">
<div class="logo">
<img src="/Content/images/my_logo.png" alt="" />
</div>
<div class="logoClient">
Test Client /*here can be text or image with ANY SIZE */
</div>
<div class="clear"></div>
</div>
CSS
.header
{
width: 950px;
font-family:Helvetica, Arial, sans-serif;
}
.logo {
float: left;
height: 55px;
padding: 10px 20px;
background: #004B35;
}
.logoClient
{
float: right;
height: 55px;
line-height: 55px;
padding: 10px 0px;
margin:0px -10px 0px 0px;
font-size: 30px;
color: #004B35;
overflow:hidden;
font-weight: bold;
text-align: right;
}
.logoClient img
{
max-height: 40px;
max-width:200px;
margin: 0px;
}
.clear
{
clear: both;
}