How to make width of form equal to width of input fields within on Chrome?

http://stackoverflow.com/questions/24813797/how-to-make-width-of-form-equal-to-width-of-input-fields-within-on-chrome

by Aaron Kahlhamer

HTML

<form>
    <b>Please log in.</b><br />
    <input type="text" placeholder="username" size="40" />
    <br />
    <input type="password" placeholder="password" size="40" />
    <br />
    <button>Login</button>
</form>

<p><b>Goal:</b> the dashed purple outline should touch the right side of the username/password fields and, as a side effect, the right edge of the login button should be aligned with the right side of those fields</p>

CSS

html, body {
    font-family: sans-serif;
}
input {
    margin: 4px 0;
    padding: .5em;
    font-family: sans-serif; /* IE - make input text/password fields same size */
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
    width:100%;
}
form {
    border: thin dashed purple; /* visualization */
    display: inline-block;
}
button {
    font-size: large;
    float: right;
    clear: both;
}
p {
    width: 400px;
}