To ensure children do not wrap onto the next line, use inline-block for children with white-space: nowrap on the parent element.

Please refer to the complete snippet in full page mode for a better understanding.

#loginArea {
  white-space: nowrap;
  border-radius: 25px;
  font-family: 'russo_oneregular';
  font-size: 20px;
  padding: 20px;
  background-color: #000000;
  color: #ffffff;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.searchField {
  display: inline-block;
  vertical-align: top;
}

<div id="loginArea">
  <div id="searchForm">
    Search For Results<br> 
    <form id="search-form" action="/races/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
      <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
      <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
      <input type="text" name="my_object" id="my_object" placeholder="Event" size="50" class="searchField">
      <input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
    </form>
  </div>
</div>

There are a variety of approaches to achieve the desired outcome, each yielding different levels of success based on the chosen method:

Using display: inline-block; on the inputs along with white-space: no-wrap; to prevent text wrapping—as suggested by @Muhammad—does indeed accomplish the goal of keeping everything on a single line.

However, this solution has its restrictions as it relies on default browser sizes for elements and may result in oversized or misaligned containers on certain devices/resolutions/window sizes, therefore neglecting the user experience aspect.

The Flex-box CSS technique is another viable option, steadily gaining wider browser support and soon to be a preferred choice in the future. While it can be effectively implemented across multiple browsers with appropriate CSS fallbacks or Javascript shims (potentially provided by frameworks), for a foolproof and universally functional solution, consider using percentage widths alongside floats and responsive media queries:

See below for the CSS code and guidelines:

Explore the Fiddle link to experiment with the setup. (The container's color changes at breakpoints, so try resizing your window.)

/* Setting the box-model to ensure predictable width assignments */
* { box-sizing: border-box; }

#loginArea {
    border-radius: 25px;
    font-family: 'russo_oneregular';
    font-size: 20px;
    padding: 20px;
    background-color: #000000;
    color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

/* Default Styles (at full width)
   Assign calculable sizes to form fields:
   We have 3 fields (1 double-sized) and a button:
   So, dividing container width (100%) by 5 = 20% per element;
   Account for spacing (margin-right),
   thus reduce each element by 1% and set margin-right to 1%;
   additionally, adjust width for double-width entry separately (40% = 39% + 1%)
*/ 
#searchForm input {
   float: left;
   width: 19%;
   margin: .25em 1% .25em 0;
}
#searchForm input#my_object {
   width: 39%;
}

/* Employ Media Queries for enhanced form layouts
   Switch to alternative field sizes for improved user experience
   at various break-point sizes (indicated by background color changes) */

/* Mobile Styles */
@media only screen and (max-width : 480px) {
   #loginArea {background-color:red;}

   /*Full-width, no margin, stacked; */
   #searchForm input {
     width: 100%;
     margin-right: 0;
   }
   #searchForm input#my_object {
     width: 100%;
   }

}

/* Phablet (In-between-sized mobile styles)
   -- equivalent to mobile for consistency)
*/
@media only screen and (min-width : 481px) and (max-width : 767px) {
   #loginArea {background-color:yellow;}

   /* Full-width, no margin, stacked; */
   #searchForm input {
     width: 100%;
     margin-right: 0;
   }
   #searchForm input#my_object {
      width: 100%;
   }
}

/* Tablet Styles */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
   #loginArea {background-color:green;}

   /* Name side-by-side, Event stacked full-width below;
      Implementing 1% padding on both left and right for balance
   */
   #searchForm input {
      width: 48%;
      margin: .25em 1%;
   }
   #searchForm input#my_object {
      width: 98%;
   }
}

Update #2:

https://i.sstatic.net/yMbxj.png

Does this meet your preferences?

Take a look at this demo: https://jsfiddle.net/7hmtdgkn/9/

• I've used the #loginArea as a wrapper element. Vertically aligned it as before with width: 100%;. Instead of horizontally aligning using transform, I've utilized text-align: center;
• To make text-align: center; work, #searchForm needs to be set as inline-block. You can use text-align: left; on #searchForm if you don't want everything within that div centered.
• Moved certain styles like background: #000; and others to the #searchForm.
• The unnecessary class searchField has been removed.

A brief update:

In my opinion, the original solution is a better way to style it (with perhaps some minor adjustments). However, if you prefer your current approach, it's already functional. https://i.sstatic.net/TJyuw.png Simply add a width of around 80% (or any suitable value) to #loginArea in your fiddle.

Research CSS reset techniques for a more uniform design.

Explore media queries here: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Employ media queries to adjust styling for various screen sizes/devices.

Here's how I would have implemented it with your existing code

Tweaked version of your HTML:

<div id="loginArea">
    <div id="searchForm">
        Search For Results<br> 
        <form id="search-form" action="/races/search" accept-charset="UTF-8" method="get">
            <input name="utf8" type="hidden" value="✓">
            <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
            <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
            <input type="text" name="my_object" id="my_object" placeholder="Event" class="searchField2 btcf">
            <input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
        </form>
    </div>
</div>

• Eliminated size attribute from the event field.
• Modified class on the event field to .searchField2.
• Added a new class .btcf (Clear float class) to the event field.

Corresponding CSS rules:

#loginArea {
    border-radius: 25px;
    font-family: 'russo_oneregular';
    font-size: 20px;
    padding: 20px;
    background-color: #000000;
    box-sizing: border-box;
    color: #ffffff;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.btcf:after {
    content: "";
    display: table;
    clear: both;
}
.searchField, .searchField2 {
    display: block;
    float: left;
    box-sizing: border-box;
    width: 25%;
}
.searchField2 {
    width: 50%;
}

• The styling for #loginArea remains unchanged.
• .searchField and .searchField2 are similar except for the width property.
• Introduced the btcf:after class for clearing floats applied on floated fields.

Usage of border-box is necessary to account for default browser styles such as borders and padding being added by default.

Fiddle link: https://jsfiddle.net/7hmtdgkn/9/

Ensure to include the width measurement as well. Follow these instructions to adjust the "searchField" class:

.searchField {
    display: inline-block;
    width:33%;
    box-sizing:border-box;
    float:left;
}

Access the JSfiddle here

Instead of using inline-block, consider utilizing table and table-cell

#loginArea {
    border-radius: 25px;
    font-family: 'russo_oneregular';
    font-size: 20px;
    padding: 20px;
    background-color: #000000;
    color: #ffffff;
    display: table;
    position: absolute;
    top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
}
.searchField {
    display: table-cell;
    float:left;
    margin :0px 2px 0px; 
}

You can see it in action here: http://jsfiddle.net/3mwn14fk/4/

To ensure one input box remains larger while keeping the other two the same width, modify the class of the desired input box to "searchField1."

Then, include the following styles:

#loginArea {
border-radius: 25px;
font-family: 'russo_oneregular';
font-size: 20px;
padding: 20px;
background-color: #000000;
color: #ffffff;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
}

.searchField {
display: inline-block;
width: calc(50% - 100px);
box-sizing:border-box;
float:left;
}

.searchField1 {
display: inline-block;
width: 200px;
box-sizing:border-box;
float:left;
}

If you wish to set a specific width for all input boxes, you can still use this method. Just remember to add a
tag before the image input to ensure it appears on a separate line.

.searchField {
 display: inline-block;
 width: 100px; // specify your preferred width
 box-sizing:border-box;
 float:left;
 }

 .search_button{
 clear:both;
 }

I trust this information proves helpful.

To ensure that all three text fields are enclosed within a div tag, you must insert a div inside the form. The style of this div should be set to:

    display:inline-flex;

This style will overwrite the default display:block of the newly added div tag. Your code should resemble the following:

    <div id="loginArea">
        <div id="searchForm">Search For Results<br> 
            <form id="search-form" action="/races/search" accept-charset="UTF-8" method="get">
                <input name="utf8" type="hidden" value="✓">
                <div style="display:inline-flex">
                    <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
                    <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
                    <input type="text" name="my_object" id="my_object" placeholder="Event" size="50" class="searchField">
                </div>
                <input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
            </form>
        </div>
    </div>

If you want to align your search icon in the same line, simply set the style of the form to:

     display:inline-flex;

By doing this, everything will align in the same line. We hope this solution works for you.

<div class="main-wrapper">
<div id="searchSection">
   Find What You Need to Discover <br> 
  <form id="search-form" action="/discover/search" accept-charset="UTF-8" method="get">
    <input name="utf8" type="hidden" value="✓">
    <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
    <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
    <input type="text" name="my_query" id="my_query" placeholder="Query" size="50" class="searchField">
    <input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
  </form> 
</div>
</div>

For the styling in Css, use the following:

.main-wrapper {display:block; text-align:center; }
#searchSection { display:inline-block; }
#searchSection form input { float:left; margin-right:5px; width:100px;}