JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
  <link href='https://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Black+Ops+One' rel='stylesheet' type='text/css'>
</head>
<div class="header">
<div class="logo-container">
    <p class="logo"><span class="seven">7</span>asobate</p>
    <span class="slogan">Web Developer and Data Scraper</span>
  </div><div class="header-nav-container">
some content</div>
</div>

CSS

*
{
  margin:0;
}
.header
{
  width:100%;
  height:65px;
  background-color:gray;
 
}
.logo-container
{
  
  display:inline-block;
  position:relative;
  background-color:green;
  height:65px;
  width:22.5%;
  padding-left:1%;
  
  
}
.logo-container .logo
{
  position:absolute;
 font-size:30px;
  font-family: 'Black Ops One';
}
.logo-container .logo .seven 
{
  color:blue;
  font-size:40px;
}
 .logo-container .slogan
{
  position:absolute;
  margin-top:40px;
  font-size:12.5px;
  font-family:'Black Ops One';
}
.header-nav-container
{
  margin-left:70px;
  display:inline-block;
  background-color:yellow;
  height:65px;
  width:10%;
}