Html 在不破坏垂直对齐的情况下定位另一个div

我遇到了一个有趣的CSS挑战。在下面的代码中，我能够垂直对齐文本和输入。我无法管理的部分是，在不破坏垂直对齐（文本输入）的情况下，我需要在输入下放置页脚文本

.container{
宽度：300px；
}
.头{
显示：内联块；
垂直对齐：中间对齐；
宽度：20%；
}
上校{
显示：内联块；
垂直对齐：中间对齐；
}
.col输入{
宽度：100px；
}

正文
页脚文本
三行文字
页脚文本

Flexbox可以做到这一点，但它需要重新构造HTML并修改一两个类……哦，还有一个伪元素

.container{
宽度：300px；
显示器：flex；
边缘：1米；
边框：1px纯红；
}
.头{
宽度：20%；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
上校，
.第二{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
边缘：0.25em；
}
输入{
宽度：100px；
}
上校：以前{
内容：“；
高度：1.2米；/*或您的线条高度*/
}

正文
页脚文本
三行文字
页脚文本

首先，我会将输入和页脚文本放在一个div中。我尝试过这样做，但它会破坏左侧文本的垂直对齐。保持垂直对齐也是这种情况下的一个要求。如果左内容有一个div，右内容有一个div，那么您可以按照自己喜欢的方式操作每个div中的内容。你可以随意调整左边的文本，也可以随意调整页脚。你不能用flexbox解决这个问题吗？@Daniel flexbox不是我的第一个解决方案，因为这需要大量的html和css更改。但如果没有选择，我可以选择flexbox。谢谢你的回答，有没有机会对两行页脚文本也应用相同的解决方案？它也应该覆盖右下方的输入。通常情况下不需要…对齐要求页脚文本的高度是已知的…或者可以计算出来。