css - 固定高さの div の隣に可変高さの div を揃える方法は?

Question

私の HTML では、タイトルの最初の行が常に箇条書きの隣にあり、2 行目 (ある場合) がタイトルの位置を変更しないように、タイトルの箇条書きの横にタイトルを配置しようとしています。次の行に続きます。

JSFiddle:

http://jsfiddle.net/Ebqq8/

HML:

<div class="bullet-container">
    <div class="bullet-title-container">
        <div class="circle-container">
            <div class="circle"></div>
        </div>
        <p class="bullet-title">Short Title</p>
    </div>
    <div class="bullet-details-container">
        <p>Body Text</p>
    </div>
</div>

CSS:

.circle-container {
    height: 34px;
    display: inline-block;
    position: relative;
    width: 14px;
    border: 1px solid blue;
}
.circle {
    border-radius: 50% !important;
    width: 12px;
    height: 12px;
    background-color: red;
    display: inline-block;
    position: absolute;
    top: 0px;
    /* width and height can be anything, as long as they're equal */
}
.bullet-title {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
    min-height: 34px;
    width: 200px;
    margin: 0px;
}
.bullet-title-container {
    color: black;
    display: inline-block;
    position: relative;
    width: 250px;
}
.bullet-details-container {
    color: black;
}
.bullet-container {
    max-width: 600px;
    float: left;
    text-align: left;
}

現在起こっていることは、最初の行が常に低すぎるということです。複数の行がある場合、タイトル全体が高すぎます。2 つの inline-block 要素を揃えればうまくいくと思ったのですが、うまくいかないようです。私は何を間違っていますか？