CSS如何将图标对齐到边框右侧，同时与相邻段落垂直居中且无多余缩进

目标 #

• 保证图标始终和相邻段落保持垂直居中对齐
• 消除当前实现中存在的图标多余缩进问题

目前已编写的代码实现 #

.note {
    border-left: 4px solid #42b983;
    margin: 10px;
    padding: 10px;
}

.test {
    position: relative;
    left: -12px;
    width: 20px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

效果参考 #

线上实际展示效果 #

预期达成的目标效果 #

诉求 #

希望能拿到可行的问题排查思路或代码优化方案。

内容的提问来源于stack exchange，提问作者Valborg