Html 在css水平条形图之前和之后放置文本

这就是我要做的。我有CSS水平条形图。问题是，我正试图在前后获得一些文本。请查看当前屏幕截图

。预测{
框大小：边框框；
宽度：100%；
利润率：20px0；
}
.预测{
填充：0；
字母间距：1px；
利润率：0.15px；
颜色：#000；
字体大小：粗体；
}
.预测p:n个孩子（2）{
浮动：对；
位置：相对位置；
顶部：-25px；
}
.预测栏{
框大小：边框框；
背景：#fff；
边框：#0000CD 1px；
边框样式：实心；
}
.预测今天{
宽度：100%；
高度：15px；
背景：#0000CD；
}

个人姓名$3077854.19

30777854.19美元

这就是你要找的吗？基本上，我已经在主div中添加了

flexbox

，以便将子元素放在一行中，并给出了

align items:center

以使它们水平居中

。预测{
框大小：边框框；
宽度：100%；
显示器：flex；
对齐项目：居中；
}
.预测{
填充：0；
字母间距：1px；
颜色：#000；
字体大小：粗体；
}
.预测栏{
框大小：边框框；
背景：#fff；
边框：#0000CD 1px；
边框样式：实心；
宽度：80%；
右边填充：20px；
右边距：10px；
}
.预测今天{
宽度：100%；
高度：15px；
背景：#0000CD；
}

人名

30777854.19美元

是的，这有助于。。。谢谢……不客气@Evren，请添加您为解决问题所做的描述。@Evren，谢谢。您的回答将帮助其他有类似问题的用户。我有一个声音+1:）@s.kuznetsov如果你是对的，我会试着把我的下一个答案的描述。谢谢：）