CSS moves content up when displayed as inline-block next to each other

Question

I have two divisions next to each other with attribute display: inline-block;; if I increase the height of the second division, the position of the first goes down by the amount I increased the height by, for example - if I add a slogan under my name as seen in this fiddle http://jsfiddle.net/wyorLh6s/1/ the position of the icon/logo goes down.

It's probably really obvious, but it's been a long weekend and I could use a push in the right direction - cheers guys.

.top {
  background: #2980b9;
  padding: 20px;
  padding-left: 200px;
  padding-right: 200px;
}
.top .logo {
  position: relative;
}
.top .logo .icon {
  font-weight: bolder;
  color: white;
}
.top .logo .icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  padding: 25px;
  padding-top: 5px;
  padding-bottom: 45px;
  border: 3px solid white;
  text-align: center;
}
.top .logo .name {
  display: inline-block;
  color: white;
  text-transform: uppercase;
}

<div class="top">
  <div class="logo">
    <div class="icon">JH</div>
    <div class="name">
      <div class="title">Jack Hardcastle</div>
      <div class="slogan">Slogan Goes Here</div>
    </div>
  </div>
</div>

My aim is to have the name inline with the JH in the logo/bordered-text, with the slogan underneath that text, http://jsfiddle.net/wyorLh6s/1/ can be seen here if the slogan div is removed.

Answer 1

As elements are displayed inline, .icon is affecting .name's baseline (default vertical-align), so you can do the following to change this behaviour:

.name{ vertical-align: top; }

JSFiddle