Input Field and Button Spacing problems

Replies: 3

I have been tinkering with the search box on this site for some time now, but the input fields and buttons of my search form will not stay on the same line. The only time they do stay on the same line, is if I drastically alter the width of both the input field and the button, but not at the percentages that they should be. I have tried placing the input field as 80% and the button as 20%, but the only time it works is if the button is 10%. This should not be. Can anyone see what the issue might be? Thanks in advance. Below is the relevant code

CSS

input[id=t] {
	margin: 0; 
	padding: 0; 
	position: relative; 
	width: 88%;
	height: 100%;
	display: flex;
}
#searchpackage {
	background: none; 
	width: 47%; 
	height: 100%; 
	margin-left: 2%; 
	margin-top: 5%;
	display: inline-block;
}

#thrmenu {
	background: none; 
	height: 100%; 
	width: 10%; 
	margin-left: 2%; 
	display: inline-block; 
}

	#cellsearchbox{
	height: 10vh;
	width: 100%;
	position: absolute;
	margin-top: 25vh;
	background-color: lightgray;
	display: flex;
	padding: 0;
	color: white;
}

HTML

<div id="cellsearchbox">
		<div id="thrmenu" onclick="openNav()">
			<div class="bar" style="background-color: white; margin-top: 30%;"></div>
			<div class="bar" style="background-color: white;"></div>
			<div class="bar" style="background-color: white;"></div>
		</div>
<div id="searchpackage">
		<form class="search" method="get" action="<?php echo home_url(); ?>" role="search">
	<input class="search-input" type="search" id="t" name="s" placeholder="<?php _e( '', 'html5blank' ); ?>" style="display: block;">
			<button class="search-submit" type="submit" role="button" style="display: block;"><?php _e( '', 'html5blank' ); ?><img src="https://peggyslittlecorner.com/wp-content/uploads/2019/05/search2i.png" style="width: 10px; height: 10px;"></button>
</form>
		</div>

• This topic was modified 41 minutes ago by Steve Stern.