Select statements width sizes not working properly?
<p>I am trying to resize select statements within a form using <a href="http://react-bootstrap.github.io/components.html#forms" rel="nofollow noreferrer">react-bootstrap</a>. However, they are not sizing quite right:</p>

<p><a href="https://i.stack.imgur.com/g81V7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g81V7.png" alt="enter image description here"></a></p>

<p>I want the last field to display as City, State(the select), Zip in that order. But for some reason, it's placing the State first. Basically, this is what I have: </p>

<pre><code>&lt;form inline&gt; 
    &lt;form control&gt; 
    &lt;select&gt;
    &lt;form control&gt;
</code></pre>

<p>This is my following code: </p>

<pre><code>      &lt;Form inline className="margin-bottom-5"&gt;
                &lt;FormControl
                    name='city'
                    type='text'
                    size='9'
                    placeholder='City'
                    value={this.props.generalInfoForm.get('city')}
                    onChange={(e) =&gt; {
                        this.props.onChange(this.props.generalInfoForm.set('city', e.target.value))
                    }}
                /&gt;
                {' '}
                &lt;div className='col-xs-2'&gt;
                &lt;Select
                    className='col-xs-2'
                    ref='stateSelect'
                    autofocus
                    options={select_options['US']}
                    simpleValue
                    clearable={false}
                    name='selected-state'
                    size='3'
                    disabled={false}
                    value={this.props.generalInfoForm.get('state')}
                    onChange={(state) =&gt; {
                        this.props.onChange(this.props.generalInfoForm.set('state', state))
                    }}
                    searchable={false}
                /&gt;&lt;/div&gt;
                {' '}
                &lt;FormControl
                    name='zip'
                    type='text'
                    placeholder='Zip'
                    maxLength='4'
                    size='5'
                    value={this.props.generalInfoForm.get('zip')}
                    onChange={(e) =&gt; {
                        this.props.onChange(this.props.generalInfoForm.set('zip', e.target.value))
                    }}
                /&gt;
                {' '}
            &lt;/Form&gt;
</code></pre>

<p>Why is the select displaying before the City field? I placed the select after the city field, but it's not working that way. Is it because of the <code>col-xs-2</code>? But I need to resize select statements, and the <a href="https://stackoverflow.com/a/22130574/4573703">method</a> that I found to do that was basically to wrap it in a <code>div</code> and set a <code>col-**-**</code> class. </p>

<p>What am I doing wrong? Is there anyway that I can put this <code>select</code> inline into the form without the weird spacing issues? </p>

<p>Any help would be greatly appreciated as I'm new to bootstrap, thanks!!! </p>