text field and button in same line - html

Question

I want to put text field and button on the same line.
I used display: inline; but it's not working. Where am i making a mistake?
.listBar {
position: absolute;
left: 40px;
top: 210px;
box-sizing: border-box;
}
#input {
width: 100%;
font-size: 16px;
border: none;
background-color: aliceblue;
padding: 14px;
float: left;
}
#add {
color: whitesmoke;
border: none;
background-color: inherit;
padding: 14px 20px;
font-size: 16px;
cursor: pointer;
float: left;
}
#add,
#input {
display: inline;
}
<div class='listBar'>
<h2 class='header' style='margin:5px'> List </h2>
<input type='text' id='input' placeholder="Title">
<button id='add'> Add </button>
</div>

Answer 1

it's because you have width: 100% on the input. It makes it take all the place and there is none left for your button. It will work if you remove the width there or set it to auto. Also, be careful with the second float, that one should be right, not left.
.listBar{
position: absolute;
left: 40px;
top: 210px;
box-sizing: border-box;}
#input{
font-size: 16px;
border: none;
background-color: aliceblue;
padding: 14px;
float: left;}
#add{
color: whitesmoke;
border: none;
background-color: inherit;
padding: 14px 20px;
font-size: 16px;
cursor: pointer;
float: right;}
#add, #input{
display: inline;}

Answer 2

You don't need the floats to do that, your input has a width of 100% that's why display inline didn't work, And the h2 is also block by default so you need to set it's display to inline or inline-block as well
.listBar {
position: absolute;
left: 40px;
top: 210px;
box-sizing: border-box;
}
#input {
font-size: 16px;
border: none;
background-color: aliceblue;
padding: 14px;
}
#add {
color: black;
border: none;
background-color: lightgrey;
padding: 14px 20px;
font-size: 16px;
cursor: pointer;
}
#add, #input {
display: inline;
}
<div class='listBar'>
<h2 class='header' style='margin:5px'> List </h2>
<input type='text' id='input' placeholder="Title">
<button id='add'> Add </button>

Answer 3

It was right that if the input text field takes 100% of the parent's width, there will be no room for the button. In addition, there is no need of display: inline. You can put the text field and a button in the same line just by adding the float: left in both elements classes and by increasing the width of the main div class element :) .....
.listBar{
position: absolute;
left: 40px;
top: 210px;
width: 30%;
box-sizing: border-box;
}
.header {
color: whitesmoke;
text-align: left;
}
/* add button */
#add{
color: whitesmoke;
border: none;
background-color: inherit;
padding: 14px 20px;
font-size: 16px;
cursor: pointer;
float: left;
}
#add:hover{
background-color: rgb(85, 78, 78);
}
/* input text field */
#input{
width: 75%;
font-size: 16px;
border: none;
background-color: aliceblue;
padding: 14px;
float: left;
}
here is snippet

Answer 4

The problem here is that input takes width: 100%; of its parent. So there is no more room for a button on its side.
Here is a working snippet with comments:
(That's how I'll do to correct the problem if it was for myself)
body { /* Added only for snippet */
background: #ddd;
}
.listBar {
position: absolute;
background: #bbb; /* Added only for snippet */
left: 40px;
top: 20px; /* Modified only for snippet */
box-sizing: border-box;
}
#input {
width: auto; /* Modified, you could also simply remove this line */
font-size: 16px;
border: none;
background-color: aliceblue;
padding: 14px;
float: left;
}
#add {
color: whitesmoke;
border: none;
background-color: inherit;
padding: 14px 20px;
font-size: 16px;
cursor: pointer;
float: right; /* Floating on the right */
}
<div class='listBar'>
<h2 class='header' style='margin:5px'> List </h2>
<input type='text' id='input' placeholder="Title">
<button id='add'> Add </button>
</div>
Second proposal after comments:
(That's not what I'll do, but that's funny anyway!)
You could play with the transform property to move the element:
body {
background-color: #ddd; /* Added only for snippet */
}
.listBar {
position: absolute;
background: #bbb; /* Added only for snippet */
left: 40px;
top: 20px; /* Modified only for snippet */
box-sizing: border-box;
}
#input {
width: 100%;
font-size: 16px;
border: none;
background-color: aliceblue;
padding: 14px;
float: left;
}
#add {
color: whitesmoke;
border: none;
background-color: inherit;
padding: 14px 20px;
font-size: 16px;
cursor: pointer;
float: right; /* Floating on the right */
transform: translate(100%, -50%); /* Added with funny values, just for demo. Waiting for your answer to my comment. :) */
}
<div class='listBar'>
<h2 class='header' style='margin:5px'> List </h2>
<input type='text' id='input' placeholder="Title">
<button id='add'> Add </button>
</div>
Note that currently, because of the padding of the input, the input goes outside of its parent.
You may want to correct that.
Documentation about transform: https://www.w3schools.com/css/css3_2dtransforms.asp
When using translate() with percentages, it takes a percentage of the size of the element.
It's quite handy.
Hope it helps.

Answer 5

Put a wrapper around the input and button and than use display: flex;
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Did this help?
.listBar {
position: absolute;
left: 40px;
box-sizing: border-box;
}
.listBar__forms {
display: flex;
}
#input {
width: 100%;
font-size: 16px;
border: none;
background-color: aliceblue;
padding: 14px;
}
#add {
color: whitesmoke;
border: none;
background-color: inherit;
padding: 14px 20px;
font-size: 16px;
cursor: pointer;
}
<div class='listBar'>
<h2 class='header' style='margin:5px'> List </h2>
<div class="listBar__forms">
<input type='text' id='input' placeholder="Title">
<button id='add'> Add </button>
</div>
</div>