Mike Mike - 2 months ago 6x
HTML Question

How do I make my DIV and SELECT elements stay on the same horizontal plane?

I want to keep my DIV and two SELECT elements on the same horizontal plane. I thought this

display: inline;

was the truth and the light, but evidently not as things are spilling over to the next line. Here’s the HTML …

<div class="profileField address">
<label for="user_address_address">Hometown</label><br>
<div class="field"><input placeholder="City" type="text" name="user[address][city]" id="user_address_city"></div>
<select name="state" id="state" class="selectMenu form-control">
<option value="">Select State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>

<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
<select id="country_country_id" name="country[country_id]" style="">
<option value="0">-- Select --</option><option value="38">Canada</option>
<option value="233">United States</option><option value="0" disabled="disabled">----------------------------</option>
<option value="3">Afghanistan</option>
<option value="15">Aland Islands</option>
<option value="6">Albania</option>
<option value="62">Algeria</option>
<option value="11">American Samoa</option>

<option value="248">Zambia</option>
<option value="249">Zimbabwe</option>

Here’s my JSFiddle -- https://jsfiddle.net/5g8jxpa3/. Any idea what I’m doing wrong or what I need to add?


Set display: inline-block on the <div>.

.field {
        border: 1px solid rgba(74,74,76,0.5) !important;
        display: inline-block;

Updated JSFiddle

Edit: Side note

Dont use display: inline; because the padding of the input inside will be ignored.

While padding can be applied to all sides of an inline element, only left and right padding will have an effect on surrounding content.

Source: inline elements and padding