Force fields to display on the same line

Question

I have two input fields which I would like to be rendered on the same line. For the moment, they look like this:

I looked at other questions such as this one: How to align two elements on the same line without changing HTML. Therefore, I tried using {display:'inline-block'} and 'margin-right:10px' in my code.

However, the elements still do not appear in the same line.

My full code:

  <div style={{display:'inline-block'}}>
                                <div className="form-group" style={{display:'margin-right:10px'}}>
                                    <label>Category</label>
                                    <br/>
                                    <select className="form-control" value={this.state.selectCategoryValue} onChange={this.handleSelectCat}>
                                        <option value="defaultCategory" disabled selected></option>
                                        {categoryDesc}
                                    </select>
                                </div>
                                {this.state.categorySelected
                                    ?
                                    <div className="form-group" style={{display:'inline-block'}}>
                                        <label>Classification</label>
                                        <br/>
                                        <select className="form-control" value={this.state.selectClassificationValue} onChange={this.handleSelectClass}>
                                            <option value="defaultClassification" disabled selected></option>
                                            {this.state.classificationDesc}
                                        </select>
                                    </div>
                                    :
                                    null
                                }
                            </div>

How can I put the components on the same line?

I would recommend to move your `style-tags` to a css file. – Berendschot Nov 19 '15 at 11:07 — Berendschot, Nov 19 '15 at 11:07

score 1 · Answer 1 · answered Nov 19 '15 at 11:06

Here's a fiddle with it working:

https://jsfiddle.net/t5km2jjp/

It seems like your first style attr was on the wrong element, and should have been on the div below. Also, style tags as attributes are formatted like style="display: inline-block;"

<div>
    <div className="form-group" style="display: inline-block;">
        <label>Category</label>
        <br/>
        <select className="form-control" value={this.state.selectCategoryValue} onChange={this.handleSelectCat}>
            <option value="defaultCategory" disabled selected></option>{categoryDesc}</select>
    </div>
    <div className="form-group" style="display: inline-block">
        <label>Classification</label>
        <br/>
        <select className="form-control" value={this.state.selectClassificationValue} onChange={this.handleSelectClass}>
            <option value="defaultClassification" disabled selected></option>{this.state.classificationDesc}</select>
    </div>
</div>

It looks like there are a few other issues in the code but this solves this issue you were asking about.

score 1 · Accepted Answer · answered Nov 19 '15 at 11:14

You have added display: inline-block to the parent div. This will cause the parent div to be displayed inline.

What you're trying to accomplish is to display the child divs inline. If you add the style rule display: inline-block to both of them, everything should work fine.

Example:

#parent-1 #child {
  display: inline-block;
}

<!--Example with display: inline-block-->
<div id="parent-1">
  <div id="child">
    Child 1:
    <input type="text" />
  </div>
  <div id="child">
    Child 2:
    <input type="text" />
  </div>
</div>

<hr/>
<!--Example without display: inline-block-->

<div id="parent-2">
  <div id="child">
    Child 1:
    <input type="text" />
  </div>
  <div id="child">
    Child 2:
    <input type="text" />
  </div>
</div>

Force fields to display on the same line

2 Answers2