Как развернуть входной тег в его контейнер div

---

Привет. У меня есть входы, и каждый из них находится в div, а эти дивы находятся в большем контейнере div. Моя проблема в том, что эти входные данные меньше, чем их контейнерные дивы. Я не знаю, как расширить их, чтобы они имели одинаковый размер высоты с их контейнерными дивами. Ниже приведена моя часть кода.

Что я уже пробовал:

#tfheader{
		background-color:#c3dfef;
		position: relative;
		top:135px;
		height:250px;
	}

	#tfnewsearch{	
		display:inline-block;
		
	}

        .tftext{
		margin: 0;
		width: 210px;
		height:100%;	
		position: relative;
		font-family: Arial, Helvetica, sans-serif;
		font-size:14px;
		color:#666;
		border:1px solid #0076a3; 
		border-left-style:none;
		border-right-style:none;
				
	}
		
	.tftext.tftextinput1{box-sizing: border-box;}

        .tftext.tftextinput2{
	box-sizing: border-box;
	}
		
	
	.group: before,.group: after{
	 content:"";
	 position: absolute;
	 top:50%;
	 left:27%;    
	 height:33px;	 
	 display: table;
	 clear: both;
	}
			
	.inputdiv{
	vertical-align: top;
        position: relative;
        height:100%;
	display:table-cell;
	border:1px solid black;
	}

.tfclear{
		clear:both;
	}

<div id="tfheader">
	<center>
	<div class="group" style="border:1px solid black;">
		<form id="tfnewsearch" method="get" 



action="http://www.google.com" >
         <div class="inputdiv">
		       <input type="search" id="tfq1b" class="tftext 

tftextinput1" 

     name="q" size="21" maxlength="120" placeholder="Search our 

website"></input>
			   </div>
    <div class="inputdiv">			
    <input type="search" id="tfq2b" class="tftext 
    tftextinput2" name="q" size="21" maxlength="120" 



placeholder="city"></input>				  	 
    </div>
    </div>
    </form>
	</center>
		<div class="tfclear"></div>
    </div>

---