Jquery 为什么在添加谷歌地图时这两个div没有对齐

我的HTML代码：

<div class="section group">
    <div class="col span_2_of_3 vertAlign">
        <div id="ctl00_BodyPlaceHolder_AddressContentBlock">
            <div class="serviceHolder brClear theAdd"><h2 class="pageIntro">1 maple street</h2>New Roc<br />New Roc<br />09099<br />(934) 313-0909
                <div class="hideContent mapUse">1 maple street New Roc New Roc 09099</div>
            </div>
        </div>
    </div>
    <div class="col span_1_of_3 gMapHolder">
    </div>
</div>

左DIV延伸到右DIV的高度以下，地图如下：

---

如何使左DIV与高度匹配或保持与右DIV相同的位置？解决问题的方法是添加一个浮点数：

.col:第一个孩子{
左边距：0；
浮动：左；
}

小提琴

加上这个

.col:first-child {
margin-left: 0;
vertical-align: top;
}

---

使用上面的代码可以很好地工作，但是使用这个JSFIDLE，我看到了问题：

.gMapHolder iframe
{
    width: 100%;
    height: 100%;
    border: 1px solid blue;
}
.serviceHolder
{
    width: 100%;
    overflow: hidden;
}
.brClear
{
    clear: both;
}
/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
    height: auto;
    overflow: hidden;
    width: 100%;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    /*float:left;*/
    display: inline-block;
    margin: 1% 0 1% 0;
}
.col:first-child {
    margin-left: 0;
}


/*  GROUPING  */
.group:before, .group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 */
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    width: 32.2%;
}

.col:first-child {
margin-left: 0;
vertical-align: top;
}