JSFiddle - React, Tailwind, and code Playground

by Oleh Aloshkin

HTML

<header class="header">
  <div class="header__logo logo">
    <h1 class="header__text logo__text-p">Logo</h1>
    <button class="button header__button logo__button-p">Search</button>
  </div>
  <div class="header__search search">
    <input type="header__input search">
    <button class="header__button button search__button-p">Search</button>
  </div>
</header>

SCSS

.header {
  &__logo {
    margin: 0;
    float: left;
  }
  &__search {
    float: right;
  }
}

.logo {
  &__text {
    &-p {
      display: block;
      margin: 0;
      margin-left: 40px;
      float: left;
    }
  }
  &__button {
    &-p {
      float: left;
      display: block;
      margin-left: 40px;
      margin-top: 10px;
    }
  }
}

.button {
  background: black;
  color: white;
}

.search {
  &__button {
    &-p {
      margin-top: 10px;
      margin-left: 20px;
    }
  }
}