<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
  <header>
    <img class="logo" src="https://images.unsplash.com/photo-1651772939278-42e1e1f0d4e2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxNzY3ODM&ixlib=rb-1.2.1&q=80&w=400" alt="logo">

    <nav class="nav">
      <div class="dropdown">
        <button class="link">Information</button>
        <div class="dropdown-menu">Dropdown Content</div>
      </div>
      <a href="#" class="link">Pricing</a>
      <button class="link">Login</button>
    </nav>
  </header>
</body>
body {
  margin: 0;
}

header {
  background-color: rgb(212, 209, 209);
  display: flex;
  flex-wrap: wrap; /* so navbar will go under logo on small smartphones */
  align-items: baseline;
  padding: 0.5rem;
  justify-content: space-between;
}

.logo {
  width: 200px;
  margin-top: 16px;
  cursor: pointer;
}
.nav{
  display:flex;
  gap: 1rem;
}
.link {
  background: none;
  border: none;
  text-decoration: none;
  color: #777;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 0;
}

.link:hover {
  color: black;
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.