How do I keep my input fields on one line while centering the DIV that contains them?

Question

I gave this CSS class to some input fields .searchField { display: inline-block; } This is their underlying HTML ...

Search For Results

However, despite the fact that there is enough horizontal screen real estate, one of them keeps wrapping to teh next line, as this Fiddle illustrates -- https://jsfiddle.net/3mwn14fk/ . How do I keep these items on one line (assuming there is enough browser width)? Note I also want to keep the DIV they are within vertically and horizontally centered. Edit: This is what I see in the Fiddle. This is on Firefox. Note the text fields are not on one line. Edit 2 Per Monica's Fiddle, this is what I see. Note that the first naem and last name are on one line, but the event text box is on the next line. I would like all three to be on the same line, even if the black box containing them has to expand JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

Just to give you an alternative you could use flexbox to achieve what you want. Here's a quick demo: /* Just some basic CSS declarations to start with */ * { box-sizing: border-box; } html, body { margin: 0; min-width: 100%; min-height: 100%; } h4 { margin: 5px 0; /* Just to make the demo look nicer */ } #loginArea { border-radius: 25px; font-family: 'russo_oneregular'; font-size: 20px; padding: 20px; background-color: #CCCCCC; color: #ffffff; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 80%; /* You could use anything here, depending if you have a wrapping parent etc */ } #search-form { position: relative; display: flex; align-items: center; /* Not necessary but will center the items */ flex-direction: row; /* Not necessary but tells that they should be in a row */ justify-content: flex-start; /* Will align items to left on larger screens */ flex-wrap: wrap; /* Will allow the flex inputs to wrap on smaller screens */ } #search-form > * { /* You could give a class or element instead of asterix */ margin: 0 10px 5px 0; /* Just to make it look nices */ width: 25%; /* Width of text inputs, you could set them different from each other */ min-width: 100px; /* Min width to wrap elements when small screen */ flex: 1; } #search-form .search_button { max-height: 20px; flex: 0 0 20px; /* Keep the magnifying class proportioned/20px wide */ min-width: 0px; /* Do not use the min-width declared above */ margin: 0 0 5px 0; }

Search For Results

Run code snippetExpand snippet I set the login area to a width of 80% but you can alter this in any way you want of course. I set also the min-width of the inputs to 100 pixels - except for the last one - so that it will wrap nicely on smaller screens. I also set the max-width for the inputs so they will not grow infinitely and the search forms justify-content: flex-start; will align them to left on bigger screens. Also the support for flexbox on browsers can be improved with setting prefixes like -webkit- and -ms- etc to the CSS declarations. JSFiddle to play around with Browser support for flexbox