<header class="header">
  
  <div class="logo">로고</div>

  <form class="search-box">
    <input type="search" class="search-box__input" 
           placeholder="검색어를 입력하세요">
    <button class="search-box__button">검색</button>
  </form>
  
</header>

.search-box {
  display: inline-flex;
  height: 1.5em; 
  border: 3px solid #1864ab;
}

.search-box:focus-within {
  box-shadow: 0 0 3px gold;
}

.search-box__input {
  border: none;
  outline: none;
  background-color: #fff;
  transition: background-color 300ms;
}

.search-box__button {
  background-color: #1864ab;
  color: white;
  font-weight: bold;
  border: none;
  border-left: 3px solid #1864ab;
  -webkit-appearance: none;
}

/* 레이아웃 코드 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  background-color: #dee2e6;
  padding: 10px;
}

.logo {
  display: inline-block;
  padding-left: 1em;
  padding-right: 1em;
  font-weight: bold;
  background-color: #000;
  color: white;
}