部分内联样式的元素？

Question

我尝试将section元素与样式化的aside元素对齐。我已尝试过inline，block和inline-block的所有组合，但我似乎无法做任何事情。我不明白为什么它没有正确对齐。 小提琴：http://jsfiddle.net/bmgkB/

视觉上，结果如下：

...我想（大约）在这里：

HTML摘录：

<aside class="icon"><p>§</p></aside> 
    <section role="region" class="aside">
        Welcome to the Pyroneous Lair. There is a variety of features here. 
    </section>

CSS摘录：

@charset UTF-8;

body
{
  background:#000;
  color:#FFF;
  width:90%;
  font:11px tahoma, sans-serif, serif;
  margin:auto
}

article,aside,figure,footer,header,hgroup,menu,nav,section
{
  display:block
}

header
{
  text-align:center
}

hr
{
  border:none;
  border-top:medium double #333;
  color:#FFF;
  text-align:center;
  padding:0
}

hr:after
{
  content:"§";
  display:inline-block;
  position:relative;
  top:-.85em;
  font-size:1.5em;
  background:#000;
  z-index:2;
  padding:0 .25em
}

.icon
{
  font:45px serif, "Times New Roman", sans-serif;
  color:#000;
  border-radius:100px;
  text-align:center;
  width:70px;
  height:70px;
  background:#A60000
}

.aside
{
  margin-left:5%;
  display:inline
}

Answer 1

让.aside和.icon成为display:inline-block（并从p中移除icon，因为它什么也没提供。 ）

http://jsfiddle.net/gaby/bmgkB/2/

演示