пропорции в CSS перекрывающихся

Question

я имею проблему на моем сайте, я пытаюсь сделать нижний текстовое поле и кнопку отправки я стилизованы как так

#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; 
} 

и я был его туда, где он выглядел действительно хорошо на некоторые компьютеры (кнопка отправить была непосредственно рядом с текстовым полем нет пикселей между ними), но было бы пересекаться или быть распространено на другие может кто-то пожалуйста, помогите мне here is the site и вот fiddle

Answer 1

Вы можете использовать Flexbox для этого:

* { margin: 0; padding: 0; box-sizing: border-box; } 
 
body { 
 
    background: rgb(28, 28, 29); 
 
    margin: 2em; 
 
} 
 
#chatbox { 
 
    width: 100%; 
 
    display: flex; 
 
    height: 2em; 
 
} 
 
#chatbox input { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: transparent; 
 
    border: 2px solid darkcyan; 
 
} 
 
#chatbox input[type=text] { 
 
    color: darkcyan; 
 
    border-radius: 4px 0 0 4px; 
 
} 
 
#chatbox input[type=submit] { 
 
    width: 70px; 
 
    background: darkcyan; 
 
    border-radius: 0 4px 4px 0; 
 
}

<div id="chatbox"> 
 
    <input type="text" /> 
 
    <input type="submit" value="Send" /> 
 
</div>