Tableless form issue

How can I make the red span (which holds the input text) strech over the remaining space after the label in this form?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<title></title>


</head>

<style>


	#frm {

		padding:0;

		margin:0 auto;

		width:30em;

		border:solid;

		border-width:1px 1px 1px 1px;

	}

	#frm form {

		padding:0;

		margin:0;

	}

	#frm label {

		padding-right:0.5em;

		height:2em;

		width:10em;

		text-align:right;

		line-height:2em;

		float:left;

		border:solid;

		border-width:0px 1px 1px 0px

	}

	#frm input {

		float:left;

		margin-top:0px;

		font-size:10px;

	}

	#frm span {

		height:2em;

		float:left;

		background:red;

		border:solid;

		border-width:0px 0px 1px 0px;

	}

	#frm #frmBottom {

		height:20px;

		background:#9D4AAB;

	}

	#frm br {

		clear:left;

	}

	

</style>

<body>


<div id="frm">

	<form>

		<label for="name">Name:</label>

		<span><input id="name" name="name"></span><br>

	

		<label for="address">Address:</label>

		<span><input id="address" name="address"></span><br>

	

		<label for="city">City:</label>

		<span><input id="city" name="city"></span><br>

	</form>

	<div id="frmBottom"></div>

</div>


</body>

</html>