Having trobule getting two DIVs to vertically align

Question

I have two DIVs

<div class=“address”>
    <div class="field"><input placeholder="City" class="textField" type="text" name="user[address][city]" id="user_address_city"></div>

    <div class="select"><select class="selectField selectMenu form-control select-hidden" name="user[address][state]" id="user_address_state"><option   value="">Select State</option>
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option></select><div class="select-styled">Select State</div><ul class="select-options"><li rel="">Select State</li><li rel="AL">Alabama</li><li rel="WY">Wyoming</li></ul></div>
</div>

The problem I’m having is aligning both DIVs on the same vertical plain. Per this Fiddle — https://jsfiddle.net/7e0jthv1/ , the select menu is aligning at a higher vertical position than the other text field. This is the style I have for my input element

input {
  font-size: 16px;
  line-height: 18px;
  box-sizing: border-box;
  font-family: inherit;
  padding: 0.4rem 0;
  text-indent: 0.8rem;
  border: none;
  outline: none;
  margin: 0;
  background-color: transparent;
}

and this is the style for the DIV containing the select menu …

.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: #fff;
  width: 220px;
  height: 40px;
}

I can’t figure out why things aren’t aligning at the top.

Answer 1

You need to add vertical-align to your .select and .field containers.

You can do something like this and it will make the elements line up correctly:

.select, .field {vertical-align:top;}

https://jsfiddle.net/p40jeq9L/

EDIT: This is due to the fact that the elements are inline-block. The accepted answer in this post explains the reasons why pretty well: My inline-block elements are not lining up properly