input text fill up remaining space

I've been looking around for like an hour or so now. And I cant seem to find out what I have to do. What I want to make is a login form. I want the span and the input next to each other. Where the input has to fill the whole size. This is my code:

<div id="login_div">

<form>

    <ul id="login_nav">
        <li>
            <span class="login_span">Username</span>
            <input class="login_input" type="text" name="username" />

        </li>

        <li>
            <span class="login_span">Password</span>
            <input class="login_input" type="password" name="password"/>
        </li>

        <li>
            <input type="submit" value="Login" />
        </li>

    </ul>

</form>

The <li> has to be the full width of the login_div, lets say 500px. The span has a certain width, lets say 100px. Then I want the input to get the remaining space. I want to achieve this all without hardcoding the width.

Any ideas?

You can use the float and layout properties, wrapping your input in an element.

DEMO

Your span should be a label, and if input is wrapped in a span you can have the label floating.

The span (or else tag) aside can use all space left available ** if layout is triggered so it cares about floating element**.

At this point, you just have to set width: 100% to input to fill up all space remaining:

/*and basic CSS */

label {
  float: left;
  width: 100px;
  /* option, whatever */
}

span {
  display: block;
  overflow: hidden;
  /* triggers layout, so doesnt show beneath float element */
  margin-right: 1em;
  /* option, whatever */
}

span input {
  width: 100%;
  /* use all space avalaible */
  box-sizing: border-box;
  /* use prefix where needed */
}

<div id="login_div">
  <form>
    <ul id="login_nav">
      <li>
        <label class="login_span">Username</label>
        <span class="login_span"><input class="login_input" type="text" name="username" /></span>
      </li>
      <li>
        <label class="login_span">Password</label>
        <span class="login_span"><input class="login_input" type="password" name="password"/></span>
      </li>
      <li>
        <input type="submit" value="Login" />
      </li>

    </ul>
  </form>