Align div on right most side of the screen

Question

How do I align the cog container on the right most area of the page and resize it so it looks like this:

.header-container {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: rgb(242, 242, 242);
  height: 4em;
  padding: 1em;
  display: flex;
}

.header-container .header-logo {
  height: 4em;
  display: flex;
}

.header-container .beta-tag {
  color: rgb(255, 0, 77);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
  -webkit-font-smoothing: antialiased;
  padding-left: 5px;
}

.header-container .settings-button {
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  align-items: center;
  vertical-align: center;
  height: em;
}
    
<div class="header-container">
      <img class="header-logo" src="https://app.houseparty.com/static/media/logo_text.f1778ae3.svg" />
      <div class="beta-tag">Beta</div>
      <div class="settings-button">
        <svg
          viewBox="0 0 40 40"
          xmlns="http://www.w3.org/2000/svg"
          style="cursor: pointer; display: block; fill: rgb(102, 102, 102);"
        >
          <path
            d="M38.1 17.3l-5.8-.7c-.3-1-.6-2-1.1-2.9l3.5-4.6c.4-.5.3-1.2-.1-1.6l-2-2.1c-.5-.5-1.2-.5-1.7-.1l-4.6 3.5c-.9-.5-1.9-.9-2.9-1.2l-.7-5.7c-.1-.6-.6-1.1-1.3-1.1h-2.9c-.7 0-1.2.5-1.3 1.1l-.7 5.8c-1 .3-2 .6-2.9 1.1L9.1 5.3c-.5-.4-1.1-.3-1.6.1l-2.1 2c-.4.5-.5 1.1-.1 1.6l3.5 4.7c-.5.9-.9 1.9-1.2 2.9l-5.7.7c-.6.1-1.1.6-1.1 1.3v2.9c0 .7.5 1.2 1.1 1.3l5.8.7c.3 1 .6 2 1.1 2.9L5.3 31c-.4.5-.4 1.2.1 1.7l2 2c.5.3 1.1.4 1.6 0l4.7-3.5c.9.5 1.9.9 2.9 1.2l.7 5.8c.1.6.6 1.1 1.3 1.1h2.9c.7 0 1.2-.5 1.3-1.1l.7-5.8c1-.3 2-.7 2.9-1.2l4.6 3.6c.5.4 1.2.4 1.7-.1l2-2c.5-.5.5-1.2.1-1.7l-3.5-4.6c.5-.9.9-1.9 1.2-2.9l5.8-.7c.6-.1 1.1-.6 1.1-1.3v-2.9c-.1-.7-.6-1.3-1.3-1.3zM20 25.1c-2.8 0-5.1-2.3-5.1-5.1s2.3-5.1 5.1-5.1 5.1 2.3 5.1 5.1-2.2 5.1-5.1 5.1z"
          ></path>
        </svg>
      </div>
    </div>

Fiddle here: https://jsfiddle.net/ta2ce75y/1/.

Answer 1

The only thing that nneds to be added in margin-left: auto; for your .header-container .settings-button class. For some additional styling, I have added a max width to the logo and the height for .header-container has been removed.

.header-container {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: rgb(242, 242, 242);
  /* height: 4em; */
  padding: 1em;
  display: flex;
  align-items: center;
}

.header-container .header-logo {
  height: 4em;
  display: flex;
}

.header-container .beta-tag {
  color: rgb(255, 0, 77);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
  -webkit-font-smoothing: antialiased;
  padding-left: 5px;
}

.header-container .settings-button {
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 150px;
  align-items: center;
  margin-left: auto;
  /* vertical-align: center;
  height: em; */
}

<div class="header-container">
  <img class="header-logo" src="https://app.houseparty.com/static/media/logo_text.f1778ae3.svg" />
  <div class="beta-tag">Beta</div>
  
  <div class="settings-button">
    <svg
      viewBox="0 0 40 40"
      xmlns="http://www.w3.org/2000/svg"
      style="cursor: pointer; display: block; fill: rgb(102, 102, 102);"
    >
      <path
        d="M38.1 17.3l-5.8-.7c-.3-1-.6-2-1.1-2.9l3.5-4.6c.4-.5.3-1.2-.1-1.6l-2-2.1c-.5-.5-1.2-.5-1.7-.1l-4.6 3.5c-.9-.5-1.9-.9-2.9-1.2l-.7-5.7c-.1-.6-.6-1.1-1.3-1.1h-2.9c-.7 0-1.2.5-1.3 1.1l-.7 5.8c-1 .3-2 .6-2.9 1.1L9.1 5.3c-.5-.4-1.1-.3-1.6.1l-2.1 2c-.4.5-.5 1.1-.1 1.6l3.5 4.7c-.5.9-.9 1.9-1.2 2.9l-5.7.7c-.6.1-1.1.6-1.1 1.3v2.9c0 .7.5 1.2 1.1 1.3l5.8.7c.3 1 .6 2 1.1 2.9L5.3 31c-.4.5-.4 1.2.1 1.7l2 2c.5.3 1.1.4 1.6 0l4.7-3.5c.9.5 1.9.9 2.9 1.2l.7 5.8c.1.6.6 1.1 1.3 1.1h2.9c.7 0 1.2-.5 1.3-1.1l.7-5.8c1-.3 2-.7 2.9-1.2l4.6 3.6c.5.4 1.2.4 1.7-.1l2-2c.5-.5.5-1.2.1-1.7l-3.5-4.6c.5-.9.9-1.9 1.2-2.9l5.8-.7c.6-.1 1.1-.6 1.1-1.3v-2.9c-.1-.7-.6-1.3-1.3-1.3zM20 25.1c-2.8 0-5.1-2.3-5.1-5.1s2.3-5.1 5.1-5.1 5.1 2.3 5.1 5.1-2.2 5.1-5.1 5.1z"
      ></path>
    </svg>
  </div>
</div>

Answer 2

Try with this:

.header-container {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: rgb(242, 242, 242);
  height: 4em;
  padding: 1em;
  display: flex;
  position: relative; /* Added */
}

.header-container .header-logo {
  height: 4em;
  display: flex;
}

.header-container .beta-tag {
  color: rgb(255, 0, 77);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
  -webkit-font-smoothing: antialiased;
  padding-left: 5px;
}

.header-container .settings-button {
  cursor: pointer;
  display: block;
  fill: rgb(102, 102, 102);
  height: 45px;
  /* Added */
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

<div class="header-container">
  <img class="header-logo" src="https://app.houseparty.com/static/media/logo_text.f1778ae3.svg" />
  <div class="beta-tag">Beta</div>
  /* Modified */
  <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" class="settings-button">
    <path d="M38.1 17.3l-5.8-.7c-.3-1-.6-2-1.1-2.9l3.5-4.6c.4-.5.3-1.2-.1-1.6l-2-2.1c-.5-.5-1.2-.5-1.7-.1l-4.6 3.5c-.9-.5-1.9-.9-2.9-1.2l-.7-5.7c-.1-.6-.6-1.1-1.3-1.1h-2.9c-.7 0-1.2.5-1.3 1.1l-.7 5.8c-1 .3-2 .6-2.9 1.1L9.1 5.3c-.5-.4-1.1-.3-1.6.1l-2.1 2c-.4.5-.5 1.1-.1 1.6l3.5 4.7c-.5.9-.9 1.9-1.2 2.9l-5.7.7c-.6.1-1.1.6-1.1 1.3v2.9c0 .7.5 1.2 1.1 1.3l5.8.7c.3 1 .6 2 1.1 2.9L5.3 31c-.4.5-.4 1.2.1 1.7l2 2c.5.3 1.1.4 1.6 0l4.7-3.5c.9.5 1.9.9 2.9 1.2l.7 5.8c.1.6.6 1.1 1.3 1.1h2.9c.7 0 1.2-.5 1.3-1.1l.7-5.8c1-.3 2-.7 2.9-1.2l4.6 3.6c.5.4 1.2.4 1.7-.1l2-2c.5-.5.5-1.2.1-1.7l-3.5-4.6c.5-.9.9-1.9 1.2-2.9l5.8-.7c.6-.1 1.1-.6 1.1-1.3v-2.9c-.1-.7-.6-1.3-1.3-1.3zM20 25.1c-2.8 0-5.1-2.3-5.1-5.1s2.3-5.1 5.1-5.1 5.1 2.3 5.1 5.1-2.2 5.1-5.1 5.1z"></path>
  </svg>
</div>