Position with position absolute and translateY in displayFlex (DropDown item) - css

Question

Hello I'm doing a popup menu signin and I'm trying to position my fontawesome icon in the same place as mine :: before
like this:
i want this:
but I got this:
code:
<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;
}
example:
https://codesandbox.io/s/morning-architecture-oi51j
I'm trying to use display: flex and position absolute for this, but to no avail