Html 将div top与同级div的底部对齐

我想将

dropdownContainer

放在

inputContainer

下面，但不要将

dropdownContainer

封装在

autocompleteContainer

中

滚动时，

dropdownContainer

应与

inputContainer

一起移动。删除或添加令牌div时相同

如果我从

dropdowncainer

中删除position:absolute，它将正确对齐，但会显示在

autocompletecainer

我更愿意在没有JS/jQuery的情况下这样做，但如果没有其他选项，我会使用它

这里有一个代码笔链接：

多谢各位

.main容器{
宽度：700px；
位置：相对位置；
}
.自动完成容器{
背景：无重复滚动0 0#ececec；
浮动：左；
宽度：100%；
/*高度：60px*/
最大高度：100px；
z指数：1；
填充：4px0；
显示器：flex；
柔性包装：包装；
光标：文本；
文本对齐：左对齐；
背景色：#e4；
溢出y：自动；
溢出x：隐藏；
}
.代币{
背景色：f7982f；
边界半径：10px；
颜色：#fff；
显示器：flex；
字体系列：无衬线；
字体大小：13px；
字体大小：400；
保证金：2倍；
填充物：2px 5px；
}
.输入容器{
柔性生长：1；
位置：相对位置；
}
.自动完成输入{
边界：中等无；
大纲：无；
宽度：100%；
填充：2x12px；
背景：透明；
颜色：#008cc1；
}
.dropdownContainer{
高度：60px；
宽度：100%；
位置：绝对位置；
背景：红色；
z指数：999；
边框：1px纯蓝色；
}

代币
令牌令牌令牌
代币
令牌令牌令牌
代币
令牌令牌令牌
代币
令牌令牌令牌
代币
令牌令牌令牌
代币
令牌令牌令牌
代币
令牌令牌令牌
代币
令牌令牌令牌
代币
令牌令牌令牌
代币
令牌令牌令牌
下拉式容器
自动完成容器是否必须浮动？如果删除该声明，则只需添加到
dropdownContainer
：

.dropdownContainer{
    left: 0;
    top: 100%;
}

我试过了，但它将dropdownContainer与autocompleteContainer的底部对齐，而不是inputContainer。代码笔：