How to center a DIV on the same line as buttons, with the correct margin

Question

I want to align the user "component" on the same line as the buttons, as seen in the 2th example. the first example works as it should. i have also tried to use float: left; but it made some of the buttons smaller and the margins doesn't look right.

.navbar {
    height: 30px;
    padding: 10px;
    background-color: #262626;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid 1px #ffee10;
    box-shadow: 0 1px 1px -1px #ffee10;
}
.logo {
    height: 100%;
    user-select: none;
}
.logo-text {
    user-select: none;
    color: #ffee10;
    font-family: 'Fira Sans', sans-serif;
    font-size: 30px;
}
.btn-normal {
    height: 100%;
    font-family: 'Fira Sans', sans-serif;
    text-transform: uppercase;
    background: #333;
    color: #666;
    padding: 5px;
    outline: none;
    border: solid #666 1px;
}
.btn-normal:hover {
    cursor: pointer;
    color: #ffee10;
  text-shadow: 0 0 1px #ffee10;
}
.btn-active {
    height: 100%;
    font-family: 'Fira Sans', sans-serif;
    text-transform: uppercase;
    background: #333;
    padding: 5px;
    outline: none;
    cursor: pointer;
    color: #ffee10;
  text-shadow: 0 0 1px #ffee10;
  border: solid #666 1px;
}
.searchbar {
height: 100%;
font-family: 'Fira Sans', sans-serif;
    text-transform: uppercase;
    background: #333;
    color: #666;
    padding: 5px;
    outline: none;
    border: solid #666 1px;
}
.searchbar:focus {
    color: #ffee10;
  text-shadow: 0 0 1px #ffee10;
}
body {
    background-color: #424242;
}

<link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/ee0bae939c.js" crossorigin="anonymous"></script>
<div class="navbar">
    <div class="navbar-left">
        <!-- <img class="logo" src="d6dc1a7f-4c1d-443d-8b52-6d19a54f6dbd_200x200.png" alt=""> -->
        <span class="logo-text">SYNAPSE</span>
    </div>
    <div class="navbar-right">
        <button class="btn-normal"><i class="fas fa-plus"></i> add</button>
        <button class="btn-active"><i class="fas fa-align-justify"></i> wikis</button>
        <button class="btn-normal"><i class="fas fa-sign-in-alt"></i> signin</button>
        <button class="btn-normal"><i class="fas fa-sign-in-alt"></i> signup</button>
        <button class="btn-normal"><i class="fas fa-sign-out-alt"></i> signout</button>
        <button class="btn-normal"><i class="fab fa-google"></i></button>
        <button class="btn-normal"><i class="fab fa-facebook"></i></button>
        <button class="btn-normal"><i class="fab fa-twitter"></i></button>
        <button class="btn-normal"><i class="fab fa-github"></i></button>
        <input class="searchbar" type="text" placeholder="search">
    </div>
</div>

.navbar {
    height: 30px;
    padding: 10px;
    background-color: #262626;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid 1px #ffee10;
    box-shadow: 0 1px 1px -1px #ffee10;
}
.logo {
    height: 100%;
    user-select: none;
}
.logo-text {
    user-select: none;
    color: #ffee10;
    font-family: 'Fira Sans', sans-serif;
    font-size: 30px;
}
.btn-normal {
    height: 100%;
    font-family: 'Fira Sans', sans-serif;
    text-transform: uppercase;
    background: #333;
    color: #666;
    padding: 5px;
    outline: none;
    border: solid #666 1px;
}
.btn-normal:hover {
    cursor: pointer;
    color: #ffee10;
  text-shadow: 0 0 1px #ffee10;
}
.btn-active {
    height: 100%;
    font-family: 'Fira Sans', sans-serif;
    text-transform: uppercase;
    background: #333;
    padding: 5px;
    outline: none;
    cursor: pointer;
    color: #ffee10;
  text-shadow: 0 0 1px #ffee10;
  border: solid #666 1px;
}
.searchbar {
height: 100%;
font-family: 'Fira Sans', sans-serif;
    text-transform: uppercase;
    background: #333;
    color: #666;
    padding: 5px;
    outline: none;
    border: solid #666 1px;
}
.searchbar:focus {
    color: #ffee10;
  text-shadow: 0 0 1px #ffee10;
}
body {
    background-color: #424242;
}
.user {
    height: 30px;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min-content;
    border: solid #666 1px;
}
.avatar {
    height: 100%;
    border-right: #666 solid 1px;
    user-select: none;
}

.username {
    margin: 5px;
    text-transform: uppercase;
    color: #666;
    user-select: none;
    font-family: 'Fira Sans', sans-serif;
}
.btn-user {
    height: 100%;
    font-family: 'Fira Sans', sans-serif;
    text-transform: uppercase;
    background: #333;
    padding: 5px;
    outline: none;
    cursor: pointer;
    color: #666;
    border-left: #666 solid 1px;
    border-right: none;
    border-top: none;
    border-bottom: none;
}
.btn-user:hover {
    height: 100%;
    font-family: 'Fira Sans', sans-serif;
    text-transform: uppercase;
    background: #333;
    padding: 5px;
    outline: none;
    cursor: pointer;
    color: #ffee10;
    text-shadow: 0 0 1px #ffee10;
}
.btn-user-active {
    height: 100%;
    font-family: 'Fira Sans', sans-serif;
    text-transform: uppercase;
    background: #333;
    padding: 5px;
    outline: none;
    cursor: pointer;
    color: #ffee10;
    text-shadow: 0 0 1px #ffee10;
}

<link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/ee0bae939c.js" crossorigin="anonymous"></script>
<div class="navbar">
    <div class="navbar-left">
        <!-- <img class="logo" src="d6dc1a7f-4c1d-443d-8b52-6d19a54f6dbd_200x200.png" alt=""> -->
        <span class="logo-text">SYNAPSE</span>
    </div>
    <div class="navbar-right">
        <div class="user">
            <img class="avatar" src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/5c/5cbf2c6f70c018351a2d74915875fd62c86cebcb_full.jpg">
            <span class="username">IZNOGUD</span>
            <button class="btn-user"><i class="fas fa-user-edit"></i></button>
            <button class="btn-user"><i class="fas fa-align-justify"></i></button>
            <button class="btn-user"><i class="fas fa-sign-out-alt"></i></button>
        </div>
        <button class="btn-normal"><i class="fas fa-plus"></i> add</button>
        <button class="btn-active"><i class="fas fa-align-justify"></i> wikis</button>
        <button class="btn-normal"><i class="fas fa-sign-in-alt"></i> signin</button>
        <button class="btn-normal"><i class="fas fa-sign-in-alt"></i> signup</button>
        <button class="btn-normal"><i class="fas fa-sign-out-alt"></i> signout</button>
        <button class="btn-normal"><i class="fab fa-google"></i></button>
        <button class="btn-normal"><i class="fab fa-facebook"></i></button>
        <button class="btn-normal"><i class="fab fa-twitter"></i></button>
        <button class="btn-normal"><i class="fab fa-github"></i></button>
        <input class="searchbar" type="text" placeholder="search">
    </div>
</div>

Answer 1

• Set to display: flex and height: 100% for the navbar-right class
• Put the buttons into a div with display: flex style
• Add margin-left: -1px to .btn-normal, .btn-active, and .searchbar

.navbar {
    height: 30px;
    padding: 10px;
    background-color: #262626;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid 1px #ffee10;
    box-shadow: 0 1px 1px -1px #ffee10;
}
.navbar-right {
    display: flex;
    height: 100%;
}
.button-container {
    display: flex;
}
.logo {
    height: 100%;
    user-select: none;
}
.logo-text {
    user-select: none;
    color: #ffee10;
    font-family: 'Fira Sans', sans-serif;
    font-size: 30px;
}
.btn-normal {
    height: 32px;
    font-family: 'Fira Sans', sans-serif;
    text-transform: uppercase;
    background: #333;
    color: #666;
    padding: 5px;
    outline: none;
    border: solid #666 1px;
    margin-left: -1px;
}
.btn-normal:hover {
    cursor: pointer;
    color: #ffee10;
  text-shadow: 0 0 1px #ffee10;
}
.btn-active {
    height: 32px;
    font-family: 'Fira Sans', sans-serif;
    text-transform: uppercase;
    background: #333;
    padding: 5px;
    outline: none;
    cursor: pointer;
    color: #ffee10;
  text-shadow: 0 0 1px #ffee10;
  border: solid #666 1px;
    margin-left: -1px;
}
.searchbar {
    height: 20px;
    font-family: 'Fira Sans', sans-serif;
    text-transform: uppercase;
    background: #333;
    color: #666;
    padding: 5px;
    outline: none;
    border: solid #666 1px;
    margin-left: -1px;
}
.searchbar:focus {
    color: #ffee10;
  text-shadow: 0 0 1px #ffee10;
}
body {
    background-color: #424242;
}
.user {
    height: 30px;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min-content;
    border: solid #666 1px;
}
.avatar {
    height: 100%;
    border-right: #666 solid 1px;
    user-select: none;
}

.username {
    margin: 5px;
    text-transform: uppercase;
    color: #666;
    user-select: none;
    font-family: 'Fira Sans', sans-serif;
}
.btn-user {
    height: 100%;
    font-family: 'Fira Sans', sans-serif;
    text-transform: uppercase;
    background: #333;
    padding: 5px;
    outline: none;
    cursor: pointer;
    color: #666;
    border-left: #666 solid 1px;
    border-right: none;
    border-top: none;
    border-bottom: none;
}
.btn-user:hover {
    height: 100%;
    font-family: 'Fira Sans', sans-serif;
    text-transform: uppercase;
    background: #333;
    padding: 5px;
    outline: none;
    cursor: pointer;
    color: #ffee10;
    text-shadow: 0 0 1px #ffee10;
}
.btn-user-active {
    height: 100%;
    font-family: 'Fira Sans', sans-serif;
    text-transform: uppercase;
    background: #333;
    padding: 5px;
    outline: none;
    cursor: pointer;
    color: #ffee10;
    text-shadow: 0 0 1px #ffee10;
}

<link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/ee0bae939c.js" crossorigin="anonymous"></script>
<div class="navbar">
    <div class="navbar-left">
        <!-- <img class="logo" src="d6dc1a7f-4c1d-443d-8b52-6d19a54f6dbd_200x200.png" alt=""> -->
        <span class="logo-text">SYNAPSE</span>
    </div>
    <div class="navbar-right">
        <div class="user">
            <img class="avatar" src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/5c/5cbf2c6f70c018351a2d74915875fd62c86cebcb_full.jpg">
            <span class="username">IZNOGUD</span>
            <button class="btn-user"><i class="fas fa-user-edit"></i></button>
            <button class="btn-user"><i class="fas fa-align-justify"></i></button>
            <button class="btn-user"><i class="fas fa-sign-out-alt"></i></button>
        </div>
        <div class="button-container">
          <button class="btn-normal"><i class="fas fa-plus"></i> add</button>
          <button class="btn-active"><i class="fas fa-align-justify"></i> wikis</button>
          <button class="btn-normal"><i class="fas fa-sign-in-alt"></i> signin</button>
          <button class="btn-normal"><i class="fas fa-sign-in-alt"></i> signup</button>
          <button class="btn-normal"><i class="fas fa-sign-out-alt"></i> signout</button>
          <button class="btn-normal"><i class="fab fa-google"></i></button>
          <button class="btn-normal"><i class="fab fa-facebook"></i></button>
          <button class="btn-normal"><i class="fab fa-twitter"></i></button>
          <button class="btn-normal"><i class="fab fa-github"></i></button>
        </div>
        <input class="searchbar" type="text" placeholder="search">
    </div>
</div>

Answer 2

I have used display: inline-block and vertical-align: top in different div and reduced height at .user class and it looks nice:

.navbar {
    height: 30px;
    padding: 10px;
    background-color: #262626;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid 1px #ffee10;
    box-shadow: 0 1px 1px -1px #ffee10;
  }
  .logo {
    height: 100%;
    user-select: none;
  }
  .logo-text {
    user-select: none;
    color: #ffee10;
    font-family: "Fira Sans", sans-serif;
    font-size: 30px;
  }
  .btn-normal {
    height: 100%;
    font-family: "Fira Sans", sans-serif;
    text-transform: uppercase;
    background: #333;
    color: #666;
    padding: 5px;
    outline: none;
    border: solid #666 1px;
    display: inline-block;
    vertical-align: top;
  }
  .btn-normal:hover {
    cursor: pointer;
    color: #ffee10;
    text-shadow: 0 0 1px #ffee10;
  }
  .btn-active {
    height: 100%;
    font-family: "Fira Sans", sans-serif;
    text-transform: uppercase;
    background: #333;
    padding: 5px;
    outline: none;
    cursor: pointer;
    color: #ffee10;
    text-shadow: 0 0 1px #ffee10;
    border: solid #666 1px;
    display: inline-block;
    vertical-align: top;
  }
  .searchbar {
    height: 100%;
    font-family: "Fira Sans", sans-serif;
    text-transform: uppercase;
    background: #333;
    color: #666;
    padding: 5px;
    outline: none;
    border: solid #666 1px;
    display: inline-block;
    vertical-align: top;
  }
  .searchbar:focus {
    color: #ffee10;
    text-shadow: 0 0 1px #ffee10;
  }
  body {
    background-color: #424242;
  }
  .user {
    height: 26px;
    background: #333;
    display: inline-block;
    align-items: center;
    border: solid #666 1px;
  }
  .avatar {
    height: 100%;
    border-right: #666 solid 1px;
    user-select: none;
    display: inline-block;
  }

  .username {
    margin: 5px;
    text-transform: uppercase;
    color: #666;
    user-select: none;
    font-family: "Fira Sans", sans-serif;
    display: inline-block;
    vertical-align: top;
  }
  .btn-user {
    height: 100%;
    font-family: "Fira Sans", sans-serif;
    text-transform: uppercase;
    background: #333;
    padding: 5px;
    outline: none;
    cursor: pointer;
    color: #666;
    border-left: #666 solid 1px;
    border-right: none;
    border-top: none;
    border-bottom: none;
    display: inline-block;
    vertical-align: top;
  }
  .btn-user:hover {
    height: 100%;
    font-family: "Fira Sans", sans-serif;
    text-transform: uppercase;
    background: #333;
    padding: 5px;
    outline: none;
    cursor: pointer;
    color: #ffee10;
    text-shadow: 0 0 1px #ffee10;
  }
  .btn-user-active {
    height: 100%;
    font-family: "Fira Sans", sans-serif;
    text-transform: uppercase;
    background: #333;
    padding: 5px;
    outline: none;
    cursor: pointer;
    color: #ffee10;
    text-shadow: 0 0 1px #ffee10;
  }

Answer 3

Change the css property to display: inline-block or inline-flex for <div class='navbar-right'>. The text is larger next to the Avatar because it is expanding to match the height of the Avatar image.