I am wanting my search button to align with my input field when on desktop. When it scales it is fine if it drops below the input field but it does need to be scalable. Right now it is automatically sitting under the input form so I know it is something to do with my styling because without it, it will align right next to the field. Here's a [codepen] (<https://codepen.io/miller765/pen/YMzPKJ>) along with the code.

```css
form.searchbar {
  margin: 25px 50px;
}

.searchMe {
  display: block;
  background-color: rgb(0, 91, 148);
  color: white;
  padding: 1px 3px;
  border: none;
  cursor: pointer;
  width: auto;
  opacity: 1.0;
  border-radius: 5px;
  font-family: Arial Sans;
  font-size: 1em;
}

.searchMe:hover {
  background-color: rgb(0, 57, 99);
}
```

```html
<form id="" class="searchbar" action="searchAppt.php" method="get">
  <input type="text" name="terms" style="width: 300px" size="40" class="sbar" placeholder="Search..." oninput="validity.valid||(value='');" onblur="if (this.value == '') {
                                       this.value = '';
                                   }" onfocus="if (this.value == '') {
                                       this.value = '';
                                   }" />&nbsp;&nbsp;
  <button type="submit" style="width: 100px" class="searchMe">Search</button>
</form>
```