How can I make a span and an input sit next to each other and collectively take up 100% of the width of the containing div?

I have the following snippet:

<html>
<body>
<div style="width: 700px;">
<span>test</span>
<input style="width: 100%;"></input>
</div>
</body>
</html>

But this doesn't do what I want. I wanted that span and input together would account for 100% of the div i.e. that input would start right where the span ends and fill until the width of the div, without breaking to the next line. How do I do that?