Позиция с абсолютным положением и переводом в displayFlex (элемент DropDown)

Question

Здравствуйте, я делаю вход во всплывающее меню и пытаюсь расположить мой замечательный значок в том же месте, что и мой :: до

, например:

Я хочу это:

но я получил это:

код:

<div className="App">
  <div className="a">A</div>
  <div className="b">
    <div className="icon">
      <FontAwesomeIcon
        className="adjust"
        icon={faUser}
        size="2x"
        fixedWidth
        color="red"
      />
    </div>
    <div className="popup" />
  </div>
</div>

css:

.App {
  width: 100%;
  height: 100px;
  background: red;
  display: flex;
  justify-content: space-between;
}
* {
  margin: 0;
  padding: 0;
}
.a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background: blue;
}
.b {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 220px;
  height: 100%;
  background: green;
}
.icon {
  width: 100%;
  height: 100%;
  display: flex;
  background: yellow;
  justify-content: flex-end;
  align-items: center;
  cursor: pointer;
}
.popup {
  position: absolute;
  transform: translateY(calc(50% + 15px));
  width: 100%;
  background: red;
  height: 200px;
}
.popup::before {
  content: "";
  display: block;
  position: absolute;
  right: 20%;
  top: -15px;
  border-bottom: 15px solid #000;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}

пример:

https://codesandbox.io/s/morning-architecture-oi51j

Я пытаюсь использовать дисплей: гибкость и абсолютное положение для этого, но безрезультатно