如何水平放置DIV,使其与父DIV的右边框重叠?

我已经在矩形分区内垂直对齐了一个圆。现在,我需要将这个圆定位在父分区的右边界上,同时保持响应性。换言之,如果父DIV调整其宽度,则圆应保持粘附在右边框上。

下面是一个我想要如何定位圆的示例:

这是我到目前为止所掌握的东西。 https://jsfiddle.net/jqvf8t2l/

HTML

<div class=“outer”>
<SPAN>我的文本lt;/SPAN>
<DIV class=“circle”>
</DIV>
</DIV>
CSS

.outer{
显示器:柔性;
项目对齐:居中;
填料:20px;
职位:相对;
边框:1倍纯黑;
宽度:40%;
}

.圆{
边框:1倍纯蓝;
边界半径:50%;
高度:20px;
宽度:20px;
背景色:白色;
}

跨度{
显示器:柔性;
自我校准:柔性启动;
}
我试过将Align self:flex endon thecircleelement and absolute positioning thecircleelement to no available.


任何帮助都将不胜感激!

下面是一个我想要如何定位圆的示例:


这是我到目前为止所掌握的东西。https://jsfiddle.net/jqvf8t2L/

HTML

<div class="outer">
    <span>My Text</span>
    <div class="circle">
    </div>
</div>


CSS

.outer {
    display: flex;
    align-items: center;
    padding: 20px;
    position: relative;
    border: 1px solid black;
    width: 40%;
}

.circle {
    border: 1px solid blue;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    background-color: white;
}

span {
    display: flex;
    align-self: flex-start;
}


我试过放align-self: flex-end上circle元素和绝对定位圆圈元素无效。

任何帮助都将不胜感激!