Html 将div底部的元素与动态边框对齐（绝对位置和边距）

我目前正在尝试制作一个宽度可变的元素，并在其右侧添加一个边框。边框应始终与大小和数量不同的文本元素保持一定距离。因此，边界应该动态移动。如果我将文本元素放在dynamic div中，一切都很好，但是文本必须放在页面底部。所以我试着使用

位置：绝对；底部：0px；左：0。但我了解到，由于绝对定位
边际
无法进一步发挥作用

你可以找到我的代码。当前状态是工作动态边框，但文本位于顶部。我注释掉了非工作部分，您可以在CSS文件的底部找到

那么，有什么更好的/有效的方法可以将文本放置在div的底部，但同时在右侧有一个动态边框呢？


.statusbar{
填充：0；
保证金：0；
高度：150像素；
宽度：50vw；
背景:#303030；
颜色：白色；
}
.statusbar.statusbar内容{
宽度：calc（100vw-48px）；
高度：150像素；
左边距：48像素；
浮动：左；
}
.statusbar.statusbar内容.statusbar列{
边缘顶部：20px；
边缘底部：20px；
显示：内联块；
浮动：左；
边界：无；
右边框：1px实心#505050；
位置：相对位置；
高度：110px；
}
.statusbar.statusbar内容#appserver列，
.statusbar.statusbar内容#命令列，
.statusbar.statusbar内容#连接列{
左边距：23px；
}
.statusbar.statusbar内容#连接列{
边界：无；
}
.statusbar.statusbar内容.列内容{
右边填充：23px；
}
.statusbar.statusbar内容.内容行{
位置：相对位置；
高度：110px；
}
.statusbar.statusbar内容.内容项{
显示：内联块；
右边距：23px；
}

测试文本1
测试文本2
这项工作：

HTML

<div class="statusbar">
    <div class="statusbar-content">
        <div class="statusbar-col" id="database-col">
            <div class="col-content">
                <div class="content-row">
                    <div class="content-extender"></div>
                    <div class="content-item">Test_Text_1</div>
                    <div class="content-item">Test_Text_2</div>
                </div>
            </div>
        </div>
    </div>          
</div>

您不必在
内容行上指定高度，但可以使用不可见（beacasue empty）内联块div垂直扩展此容器。然后将底部的内联块组件对齐

请看这里的分叉代码笔：（我添加了一些内容，这样您就不必在每个块上指定固定的高度：
contentextender
height定义了整个状态栏的高度）

这就是你想做的吗？
这很有效：

HTML

<div class="statusbar">
    <div class="statusbar-content">
        <div class="statusbar-col" id="database-col">
            <div class="col-content">
                <div class="content-row">
                    <div class="content-extender"></div>
                    <div class="content-item">Test_Text_1</div>
                    <div class="content-item">Test_Text_2</div>
                </div>
            </div>
        </div>
    </div>          
</div>

您不必在
内容行上指定高度，但可以使用不可见（beacasue empty）内联块div垂直扩展此容器。然后将底部的内联块组件对齐

请看这里的分叉代码笔：（我添加了一些内容，这样您就不必在每个块上指定固定的高度：
contentextender
height定义了整个状态栏的高度）

这就是你想要做的吗？
Flexbox可以做到：

.statusbar .statusbar-content .content-row {
  position: relative;
  height: 110px;
  display: flex;
  align-items: flex-end;
}


.statusbar{
填充：0；
保证金：0；
高度：150像素；
宽度：50vw；
背景:#303030；
颜色：白色；
}
.statusbar.statusbar内容{
宽度：calc（100vw-48px）；
高度：150像素；
左边距：48像素；
浮动：左；
}
.statusbar.statusbar内容.statusbar列{
边缘顶部：20px；
边缘底部：20px；
显示：内联块；
浮动：左；
边界：无；
右边框：1px实心#505050；
位置：相对位置；
高度：110px；
}
.statusbar.statusbar内容#appserver列，
.statusbar.statusbar内容#命令列，
.statusbar.statusbar内容#连接列{
左边距：23px；
}
.statusbar.statusbar内容#连接列{
边界：无；
}
.statusbar.statusbar内容.列内容{
右边填充：23px；
}
.statusbar.statusbar内容.内容行{
位置：相对位置；
高度：110px；
显示器：flex；
对齐项目：柔性端；
}
.statusbar.statusbar内容.内容项{
显示：内联块；
右边距：23px；
}

测试文本1
测试文本2
Flexbox可以做到：

.statusbar .statusbar-content .content-row {
  position: relative;
  height: 110px;
  display: flex;
  align-items: flex-end;
}


.statusbar{
填充：0；
保证金：0；
高度：150像素；
宽度：50vw；
背景:#303030；
颜色：白色；
}
.statusbar.statusbar内容{
宽度：calc（100vw-48px）；
高度：150像素；
左边距：48像素；
浮动：左；
}
.statusbar.statusbar内容.statusbar列{
边缘顶部：20px；
边缘底部：20px；
显示：内联块；
浮动：左；
边界：无；
右边框：1px实心#505050；
位置：相对位置；
高度：110px；
}
.statusbar.statusbar内容#appserver列，
.statusbar.statusbar内容#命令列，
.statusbar.statusbar内容#连接列{
左边距：23px；
}
.statusbar.statusbar内容#连接列{
边界：无；
}
.statusbar.statusbar内容.列内容{
右边填充：23px；
}
.statusbar.statusbar内容.内容行{
位置：相对位置；
高度：110px；
显示器：flex；
对齐项目：柔性端；
}
.statusbar.statusbar内容.内容项{
显示：内联块；
右边距：23px；
}

测试文本1
测试文本2
有一天我真的应该看看flexbox！有一天我真的应该看看flexbox！是的，这就是我想做的。对我有好处。您还可以告诉我如何在
内容行上方放置另一个div或span，中间有一些像素空间吗？在这里，我看不到您想要获得的输出…是否希望此新元素在文本上方显示一些像素？或者
内容行
块上方的一些像素？我对你的答案做了一些小改动，但我得到了你答案背后的主要思想。它应该在“内容行”块的上方，然后，您只需将它放在HTML中的
内容行
块的前面（请参阅我刚才编辑的答案中的代码笔）