Html css重叠中的比例

我有一个问题，我在我的网站上，我试图使底部的文本框和提交按钮，我有这样的风格

#chat-box-div-submit{
position:fixed;
bottom:5;
right:5px;
margin:10px;
height:30px;
background:darkcyan;
width:70px;
outline: none;
}
#chat-box-div-txtinpt{
width:65%;
left:305px;
min-width:100px;
position:fixed;
bottom:5;
margin:10px;
outline-color: darkcyan;
}
.submit{
background:darkcyan;
border:0;
border-radius:4px;
}
.big-txtinpt{
height:30px;
background: transparent;
border-radius:4px;
border:2px solid darkcyan;
color:darkcyan;
}

---

我把它放在一些电脑上看起来非常漂亮的地方（提交按钮就在文本框旁边，中间没有像素），但它会重叠或分散在其他电脑上。有人能帮我一下吗？这里是一个

你可以使用flexbox来实现这一点：

*{margin:0；padding:0；框大小：border-box；}
正文{
背景：rgb（28,28,29）；
边缘：2米；
}
#聊天室{
宽度：100%；
显示器：flex；
高度：2米；
}
#聊天室输入{
宽度：100%；
身高：100%；
背景：透明；
边框：2个实心黑色；
}
#聊天室输入[类型=文本]{
颜色：深色；
边界半径：4px 0 0 4px；
}
#聊天室输入[类型=提交]{
宽度：70px；
背景：darkcyan；
边界半径：0 4px 4px 0；
}

欢迎光临。请给我打电话。你能帮我吗？我需要你按照我之前评论中的说明来帮助我。Html、css、JavaScript以及您使用的任何其他内容。