Can anyone help me figure out why my submit button goes under the input text field when the browser window is smaller than their total width? Here's an attachment for reference: https://i.sstatic.net/Ny4Hq.png
.content {
height: auto;
margin: auto;
overflow: hidden;
max-width: 1100px;
}
/* CSS code continues... */
<!DOCTYPE html>
<html>
<head>
<title>Web Hosting</title>
<meta charset="UTF-8">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="styles/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section class="search-sec">
<div class="content">
<h1>Your perfect domain starts here.</h1>
<form>
<input type="text" name="domain" placeholder="Search for a domain here.">
<input type="submit" value="Search">
</form>
</div>
</section>
</body>
</html>
I want the submit button to always stay next to the input text field, even if I resize the browser window. How can I make it so that the input field decreases in size while keeping the submit button next to it?
Thank you!