Automatically resize input according to button size? - html

Question

I have an input and a button in the same div, and want them to be in a single line without any gap in between, regardless of screen size, but cannot get that to happen. The button seems to have a horizontal padding, although I set both padding and margin to none, so % wouldn't be a solution. Also, I would like the button to wrap around its contents, so even if it could work, it wouldn't be the greatest solution. Is there a way to set the location and size of the button and resize the input accordingly with CSS? Or is some JavaScript needed to do this?
Desired Output:
Current Output:
Current code (CSS is insignificant, as it doesn't work)
.chatinp {
height: 10px;
width: 100%;
position: absolute;
overflow: hidden;
bottom: 0;
right: 0;
size: fixed;
height: auto;
border-top: solid;
}
#CHAT {
font-family: monospace;
font-size: 20px;
position: relative;
bottom: 0;
left: 0;
height: 100%;
width: 95%;
background: none;
border: solid 1px #fff;
padding: none;
margin: none;
}
#SEND {
font-family: monospace;
font-size: 20px;
position: relative;
bottom: 0;
right: 0;
height: 100%;
width: 10%;
background-color: #090;
border: solid 1px #fff;
padding: none;
margin: none;
}
<div class="chatinp">
<input type="text" name="CHAT" id="CHAT">
<button name="SEND", id="SEND">SEND</button>
</div>

Answer 1

You can use several tools to achieve that :
CSS property float (example below)
will run even on old browser
doesn't fit for complex use (in your case, that fine)
CSS Grid Layout
CSS Flex element
Float Example
.chatinp {
height: 30px;
width: 100%;
}
#CHAT, #SEND{
box-sizing: border-box; /* permit the use of border and padding without overstepping the width */
height: 100%; /* use all of the avaible height given by the parent */
padding: none;
margin: none;
position: relative; /* needed for float */
float: left; /* make element align from left to right, then top to bottom */
}
#CHAT {
width: 85%;
border: 3px solid grey;
}
#SEND {
width: 15%;
border: 3px solid green;
}
<div class="chatinp">
<input type="text" name="CHAT" id="CHAT">
<button name="SEND" id="SEND">SEND</button>
</div>

Answer 2

You might need to use flexboxes if I understood your demand.
I added display: flex on parent container (.chatnip) and flex : <value> on child elements to tell them how much space they should take.
There's no gap between the boxes.
.chatinp {
height: 10px;
width: 100%;
position: absolute;
overflow: hidden;
bottom: 0;
right: 0;
size: fixed;
height: auto;
border-top: solid;
display: flex
}
#CHAT {
font-family: monospace;
font-size: 20px;
position: relative;
bottom: 0;
left: 0;
height: 100%;
background: none;
border: solid 1px #fff;
color: white;
flex: 9;
}
#SEND {
font-family: monospace;
font-size: 20px;
position: relative;
bottom: 0;
right: 0;
height: 100%;
background-color: #090;
border: solid 1px #fff;
color: white;
padding: none;
margin: none;
flex: 1;
}
<div class="chatinp">
<input type="text" name="CHAT" id="CHAT">
<button name="SEND", id="SEND">SEND</button>
</div>

Answer 3

Since you are making use of flexbox, try to make the most advantage of it. For chatinp class use display: flex and for #CHAT use flex: 1 if needed add a width for #SEND
.chatinp {
width: 100%;
position: absolute;
overflow: hidden;
bottom: 0;
right: 0;
border-top: solid;
display: flex;
}
#CHAT {
font-family: monospace;
font-size: 20px;
/* position: relative; */
/* bottom: 0; */
left: 0;
height: 100%;
/* width: 95%; */
background: none;
border: solid 1px #fff;
padding: none;
margin: none;
flex: 1;
}
#SEND {
font-family: monospace;
font-size: 20px;
/* position: relative; */
/* bottom: 0; */
/* right: 0; */
/* height: 100%; */
/* width: 10%; */
background-color: #090;
border: solid 1px #fff;
padding: none;
margin: none;
}
<div class="chatinp">
<input type="text" name="CHAT" id="CHAT" />
<button name="SEND" id="SEND">SEND</button>
</div>

Answer 4

I prefer to use grid where you can specify how much portion and number of elements to be placed in a single row
div{
display:grid;
grid-template-columns:80vw auto;/*auto auto , if you don't need any specific space for the items*/
}
<div class="chatinp">
<input type="text" name="CHAT" id="CHAT">
<button name="SEND", id="SEND">SEND</button>
</div>

Answer 5

add these to your css: (and get rid of height: 100%; from #CHAT)
.chatinp {
display: flex;
}
#CHAT {
height: auto;
}