HTML Input text side by side

Question

i've been trying to figure out how to make the input text and input button side by side. Not only that, it seems my text-align : center is not applying for the text input.

I'm trying not to add multiple spaces just to indent the placeholder.

I've been trying various way but i'm still stuck : Codepen :-

https://codepen.io/jayvicious/pen/dRyJKE HTML :

<div class="cell at-bottom">
      <input type="text" placeholder="All Japan Cities" class="formElement">
      <input type="text" placeholder="Check In Date" class="formElement">
      <input type="text" placeholder="Check Out Date" class="formElement">
      <select name="cars">
  <option value="Guest1">1 Guest</option>
  <option value="Guest2">2 Guest</option>
  <option value="Guest3">3 Guest</option>
  <option value="Guest4">4 Guest</option>
  <option value="Guest5">5 Guest</option>
</select>
      <input type="submit" value="Search" class="formElement">
    </div>

CSS:

input[type=text], select {
text-allign:center;  
padding: 12px 20px;
margin: auto;
display: inline-block;
border: 1px solid  #000000;

}

input[type=submit] {
    font-family: 'arial', sans-serif;
    background-color:white;
    text-align: center;
    color:red;
  padding: 14px 45px;
  margin: 8px 0;
  border: 1px solid  #000000;
  cursor: pointer;
}

.cell.at-bottom {
  height: 20px;
  padding: 20px;
}

My expected output should be something like this :

EDIT : Center issue has been fixed by matthias gwiozda Link that fixed it : Center HTML Input Text Field Placeholder

Answer 1

Your placeholder problem was that you spelt text-align as text-allign. You don't need WebKit integration if you want to style all the text to the center. If you want to center just the placeholder then you will have to use WebKit integration.

For your spacing problem, try adding this block to your css:

select {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='#444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

(select styling taken from this SO answer)

Another thing I did to fix the spacing was to put all the inputs into a table, this seemed to fix it.

input[type=text],
select {
  text-align: center;
  padding: 12px 20px;
  margin: none;
  display: inline-block;
  border: 1px solid #000000;
}

input[type=submit] {
  font-family: 'arial', sans-serif;
  background-color: white;
  text-align: center;
  color: red;
  padding: 12.5px 45px;
  border: 1px solid #000000;
  cursor: pointer;
}

.cell.at-bottom {
  height: 20px;
  padding: 20px;
  border-collapse: collapse;
}

.cell.at-bottom td {
  padding: 0;
  margin: 0;
}

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='#444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
  background-position: 100% 50%;
  background-repeat: no-repeat;
  width: 90px;
}

<table class="cell at-bottom"><tr><td><input type="text" placeholder="All Japan Cities" class="formElement"></td><td><input type="text" placeholder="Check In Date" class="formElement"></td><td><input type="text" placeholder="Check Out Date" class="formElement"></td><td><select name="cars">
  <option value="Guest1">1 Guest</option>
  <option value="Guest2">2 Guest</option>
  <option value="Guest3">3 Guest</option>
  <option value="Guest4">4 Guest</option>
  <option value="Guest5">5 Guest</option>
</select></td><td><input type="submit" value="Search" class="formElement"></tr></table>

Answer 2

This is a duplicate of Center HTML Input Text Field Placeholder .

As David mentioned, you can fix the type-mistake with "text-allign" or if you want to give only your placeholders the Text-align you can use this:

::-webkit-input-placeholder {
   text-align: center;
}

:-moz-placeholder { /* Firefox 18- */
   text-align: center;  
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;  
}

:-ms-input-placeholder {  
   text-align: center; 
}

Edit: The following solution is only working for Chroium Browsers. So its useless:

For you spacing - problem you can set the following Css for your Container of your Input-fields :

.cell.at-bottom    {
display: inline-table;
}

Answer 3

I made some changes to your HTML and CSS that should do the trick. e.g.:

HTML:

<div class="cell at-bottom">
      <input type="text" placeholder="All Japan Cities" class="formElement">
      <input type="text" placeholder="Check In Date" class="formElement">
      <input type="text" placeholder="Check Out Date" class="formElement">
      <select name="cars" class="formElement">
  <option value="Guest1">1 Guest</option>
  <option value="Guest2">2 Guest</option>
  <option value="Guest3">3 Guest</option>
  <option value="Guest4">4 Guest</option>
  <option value="Guest5">5 Guest</option>
</select>
      <input type="submit" value="Search" class="formElement">
    </div>

CSS:

.cell{
  display: flex;
  align-content: flex-start;
}

.formElement{
  box-sizing: border-box;
  height: 46px;
  border: 1px solid  #000000;
  border-radius: 0px;
  text-align:center;
  padding: 12px 20px;
  flex-grow: 1;
  flex-basis: 100px;
}

input[type=submit] {
    font-family: 'arial', sans-serif;
    background-color:white;
    color:red;
  cursor: pointer;
}

.cell.at-bottom {
  height: 20px;
  padding: 20px;
}

The key change is to use display: flex for your div container. From there I grouped all input and select elements in the .formElement and sized them in there. This keeps everything the same width, height, and in line.