Reducing the input width of input in bulma - css

Question

I'm having hard time reducing the input width and making it responsive. Right now, my form looks like this:
As you can see the inputs are having full width. I tried giving it a style of width:33% and textAlign: "center" to the parent but it didn't work. I just want the form to be centered and responsive.
Here's the code.
<div className="field">
<p className="control has-icons-left has-icons-right">
<input
onChange={this.handleChange}
name="username"
value={this.state.username}
className="input is-rounded"
type="text"
placeholder="Username"
/>
<span className="icon is-small is-left">
<i className="fas fa-user"></i>
</span>
<span className="icon is-small is-right">
<i className="fas fa-check"></i>
</span>
</p>
</div>

Answer 1

You are supposed to wrap your input fields in column that is width controlled as below;
<div class="column is-3">
<!-- your code here -->
</div>