如果你愿意接受仅使用CSS的解决方案，并且可以牺牲一些与旧浏览器的兼容性，那么CSS flexbox方案是最好的选择。基本上，我们将设置两种情况：
A：当视口大于620px时
计算：登录表单的最大宽度为580px，左右padding各20px。
我们允许#first_name和#last_name的宽度为20%，允许#event增长以填充剩余空间，并使.search_button具有40x40像素的固定尺寸。
这意味着以下规则将起作用：
#search-form {
display: flex;
flex: 1 0 auto;
}
#first_name, #last_name { width: 20%; }
#event { }
.search_button { width: 40px; height: 40px; }
B: 当视口小于620px时
和上面的计算相同。
Flexbox默认不换行，试图将元素放在一行上。但在窄视口场景下，我们不希望出现这种行为，因为您要求将表单分成多行。因此，使用flex-wrap：wrap将强制换行（在某种意义上进行断行）。
我们仍然希望#first_name和#last_name占据全部宽度。我们可以简单地使用width: 50%，使它们加起来等于100％。由于启用了换行，请确保它们的总和不超过100％。如果您正在添加边框（而不在输入元素上使用box-sizing：border-box;）和/或边距，则需要使用width: calc(50% - x)来确保处理这些额外空间。
在第二行中，我们有#events和.search_button。我们仍然希望将.search_button保持为40像素宽，但希望#events扩展以填充第二行的所有空间。这可以通过在#events上声明width: calc(100% - 40px)来实现。
记得将所有这些内容包装在一个@media查询中，并将max-width设置为620px：
@media (max-width: 620px) {
#search-form {
flex-wrap: wrap;
}
#first_name, #last_name { width: 50%; }
#event { width: calc(100% - 40px); }
}
请查看此链接以获得概念验证代码示例：https://jsfiddle.net/teddyrised/382fhxpc/。请注意，我已删除display: table和其他内联CSS样式。尽可能避免使用内联CSS。
我还嵌入了一个代码片段示例：
body {
background-color:grey;
}
#logo {
margin: 0 auto;
padding: 10px;
}
#searchForm {
padding: 20px;
}
#search-form {
display: flex;
flex: 1 0 auto;
}
#first_name, #last_name { width: 20%; }
#event { }
.search_button { width: 40px; height: 40px; }
#loginLogos {
margin: 0 auto;
padding: 20px;
}
#loginArea {
border-radius: 25px;
font-size: 20px;
padding: 20px;
background-color: #ffffff;
color: #000000;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 100%;
max-width: 580px;
}
@media (max-width: 620px) {
#search-form {
flex-wrap: wrap;
}
#first_name, #last_name { width: 50%; }
#event { width: calc(100% - 40px); }
}
.searchField {
line-height: 40px;
font-size: 22px;
margin: 0;
padding: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
text-align: start;
}
<div id="loginArea">
<div id="searchForm">
Search For Results
<br />
<div>
<form id="search-form" action="/events/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="event" id="event" placeholder="Event" class="searchField">
<input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
</form>
</div>
</div>
</div>
#event添加flex-grow: 1即可使其填充剩余空间 https://jsfiddle.net/fmy1syfw/. - David Mann中声明了flex缩写。但是，如果将事件字段特别设置为flex-grow: 1`可以解决你面临的问题，那就继续吧 :) - Terry