How do I expand input tag to its container 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>