Can't render input inline

I'm trying to create an input with an icon indicating its purpose, but it's not rendering how I like:

I want the input at the same level as the icon, however, dispite my best efforts:

.field
{
    margin: auto;
    border-radius: 10px;
    width: 67%;
    white-space: nowrap;
    overflow-x: auto;
}
.field input, .field label
{
    display: inline-block !important;
    margin: 0;
    padding: 0;
}

<div class = 'field w3-bar w3-center w3-border w3-border-green'>
    <label class='w3-bar-item w3-left  w3-border-right w3-border-green fas fa-user' for='username'></label>

    <input class="w3-bar-item w3-right w3-input w3-border-green w3-hover-border-green no-box" id="username" name="username" required type="text" value="">
</div>

— it still renders on a new line! Note that I'm using w3.css and font-awesome. Is there something I'm missing? Thank you.