Javascript 如何使div中的分隔符始终与div的上箭头保持同步，即使使用react和css更改div中的内容？

我希望div中的分隔符正好位于div的顶部箭头下方。现在我有如下内容：

下面是我的代码

函数父函数（）{
返回(
点击
);
}
函数BoxContent（）{
返回(
{true&&(

我不知道如何使分隔符和箭头保持同步，即使在可用组件中的数据含义发生变化时，即使我将范围内容更改为一些较大的数字，分隔符和箭头也应刚好位于彼此下方

我该怎么做呢？
我已经编辑了你的沙盒

仅应用了以下更改：

在元素
.divider
处添加了CSS规则
位置：相对；
更改了伪选择器的父级
：在
之后（与顶部箭头有关的那一个）。现在箭头将元素
.divider
作为父级。这样，无论内容中的值有多长，箭头始终保持在分隔符上方（请查看下图）
最后，我调整了arrow元素的顶部和左侧位置（
.divider:after
），因此它将始终保持在容器顶部，并围绕分隔符居中对齐（
left
值来自计算
0-箭头宽度/2
）。新值如下：
顶部：-32px；左侧：-4px；

您可以在下面找到所有已修改的CSS：


.App{
字体系列：无衬线；
文本对齐：居中；
}
.包装纸{
高度：40px；
显示器：flex；
z指数：4；
背景色：#fff；
边框底部：1px实心#CCCC；
位置：相对位置；
}
.flex_包装{
弹性：1；
显示器：flex；
调整内容：灵活启动；
对齐项目：居中；
}
.盒子{
填充：16px；
高度：61px；
边界半径：8px；
边框：1px纯黑；
背景色：白色；
位置：绝对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
顶部：72px；
左：35px；
}
.box\u内容\u包装{
显示器：flex；
弯曲方向：行；
对齐项目：居中；
}
.视图{
显示器：flex；
弯曲方向：行；
调整项目：基线；
边缘顶部：8px；
}
.sub_文本{
空白：nowrap；
}
.间距{
宽度：8px；
}
.分隔器{
高度：37像素；
左边距：16像素；
右边距：16px；
边框：1px纯灰；
位置：相对位置；
}
.分隔符：：之后{
内容：“；
宽度：0px；
高度：0px；
位置：绝对位置；
背景色：黑色；
顶部：-32px；
左：-4px；
左边框：8px实心；
左边框颜色：#fff；
边框底部：8px实心透明；
边框顶部：8px实心透明；
变换：平移（-50%）旋转（-90度）；
}
非常感谢。但这会将箭头从单击按钮移开。如果单击按钮为，则表示单击按钮的左边距为165px。因此，箭头、分隔符应始终位于单击按钮的正中央。