DropDown предмет с всплывающей карты

Question

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

Мне в основном нужно добраться до этого:

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

Я получил это:

JSX

export default function App() {
  return (
    <LoginColumn>
      <WrapperLogin>
        <LoginIconWrap>
          <a>
            <FontAwesomeIcon
              className="adjust"
              icon={faUserCircle}
              size="2x"
              fixedWidth
              color="white"
            />
          </a>
        </LoginIconWrap>
        <DropDownWrap>
          <a>
            <p>
              MyAccount
              <span>
                <FontAwesomeIcon
                  className="adjust"
                  icon={faAngleDown}
                  size="lg"
                  fixedWidth
                  color="white"
                />
              </span>
            </p>
          </a>
        </DropDownWrap>
      </WrapperLogin>
      <SignWrap>a</SignWrap>
    </LoginColumn>
  );
}

css:

export const SignWrap = styled.div`
  background: green;
  position: absolute;
  width: 220px;
  height: 250px;
  top: 58px;
  :before {
    content: "";
    display: block;
    position: absolute;
    right: 25%;
    top: -15px;
    border-bottom: 15px solid #000;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
  }
`;
export const LoginColumn = styled.div`
  position: relative;
  width: 220px;
  display: flex;
  flex-direction: column;
  background: hotpink;
`;
export const DropDownWrap = styled.div``;
export const LoginIconWrap = styled.div``;
export const WrapperLogin = styled.div`
  height: 100%;
  position: relative;
  width: 220px;
  display: flex;
  align-items: center;

  background: red;
  ${DropDownWrap} {
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    position: relative;
    background: hotpink;
    a {
      position: absolute;
      background: black;
      right: 1rem;
      color: white;
      font-family: Roboto;
      font-size: 0.8em;
    }
  }
  ${LoginIconWrap} {
    height: 100%;
    display: flex;
    justify-content: center;
    background: green;
  }
  :hover {
  }
`;

Я не получаю желаемого результата, я уже пробовал с trasnlate x с абсолютной позицией