How to change the size of input boxes in the same inline-form on bootstrap
<p>I am developing a webpage using bootstrap where the user will input their personal data, like address, phone, etc. In the address, I have "Number" and "Complement" inputs in the same inline-form, and I want to make the <code>Number</code> input to be smaller then <code>Complement</code>. Right now they have the same width</p>

<p>My HTML:</p>

<pre><code>&lt;div class="form-inline" id="double_form_register"&gt;
    &lt;div class="form-group" id="left_form_register"&gt;
        &lt;input type="number" class="form-control" id="number" placeholder="Number"/&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;input type="text" class="form-control" id="complement" placeholder="Complement"/&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>My less:</p>

<pre><code>#left_form_register {
    margin-right: 30px;
}

#double_form_register {
    margin: 0px 5px 10px 15px;       
    width: 500px;
}
</code></pre>

<p>When I set width to <code>#left_form_register</code>, it all brokes. I have experience in backend, but vey new to front-end development</p>