how can I keep all text on the same line?

Question

Essentially, after applying a margin, my text of different sizes all are above or below each other (they are in the same line) but they arent like centered, only when I make them all the same size do they look centered.

body {
  background-color: lightgrey;
}

.logo {
  font-size: 2.5rem;
}

.navbar {
  /* color: white; */
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 25px 40px;
  color: white;
  font-family: 'Open Sans', sans-serif;
}

.nav-options {
  list-style: none;
}

.nav-options .nav-buttons li {
  display: inline-block;
  font-size: 1.5rem;
  padding: 20px;
  font-weight: bold;
}

.navbar a {
  color: white;
  font-size: 1.5rem;
}

.flex-row {
  flex-flow: row wrap;
}

<div class="navbar">
  <label class="logo">appy</label>
  <div class="nav-options">
    <ul class="nav-buttons">
      <li>Home</li>
      <li>About</li>
      <li>Gallery</li>
      <li>Pricing</li>
      <li>Features</li>
      <li>FAQ</li>
      <li>Blog</li>
      <li>Contacts</li>
    </ul>
  </div>
  <a class="sign-up">Sign Up</a>
</div>

Answer 1

try adding align-items: center; to css class .navbar.

.navbar{
    /* color: white; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 25px 40px;
    color: black;
    font-family: 'Open Sans', sans-serif;
    }

Answer 2

you can use

justify-content: center;
align-items: center;

then you can give some margin or padding to logo or sign up. Y