Css displayFlex中带有绝对位置和平移的位置（下拉项）

您好，我正在做一个弹出菜单登录，我正在尝试将我的fontawesome图标定位在与我的相同的位置：：之前

像这样：

我想要这个：

但我明白了：

代码：

<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>

.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;
}

例如：

---

我试着用display:flex和position-absolute来描述它，但是没有用

好的，这不清楚，我没有注意到我试着用最好的方式来描述它，我的英语不是很好，所以我试着用screnshotsdon（对不起，我的英语也很一般；）