如何安排两个div彼此相邻？

Question

我有两个div，我打算将它们排列在彼此旁边，我为它们设置了显示内联块，但没有工作，其中一个比其他更好。

我想要这个：

HTML：

<header>
    THIS IS HEADER
</header>
<div id="content">
<div id="fori-div" class="inline-st">Something will come here with some tabs...</div>
    <div id="send-ads" class="inline-st">
        <textarea id="send-ads-textarea" placeholder="Please write here...."/></textarea>
        <div id="product-list">
            <a href="#">Refrence 1</a>
            <a href="#">Refrence 2</a>
            <a href="#">Refrence 3</a>
            <a href="#">Refrence 4</a>
        </div>
</div>

</div>

<footer>THIS IS FOOTER</footer>

的CSS：

    html,body{
    border:0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    direction: rtl;
}

header,footer{
    background: wheat;
    border-top: 3px solid red;
    border-bottom: 3px solid red;
}

#content{
    text-align: center;
}

.inline-st{
    display: inline-block;
    position: relative;
}
#send-ads{
    width:613px;
    height: 235px;
    background: white;
    border:1px solid #d6d6d6;
    padding: 14px;
}

#send-ads-textarea{
    width:581px;
    height: 131px;
    border:1px solid #dbdbdb;
    resize: none;
    padding:3px;
}
/*End #content> #send-ads*/


#fori-div{
    height: 235px;
    width:388px;
    background: green;
}

#product-list{
    background: red;
    margin-top:41px;
    height: 33px;

}

#product-list a{
    width:48px;
    height: 33px;
    display: inline-block;
    background: yellow;

}

但是没有工作，没有以上面的风格显示（图片）。 DEMO

当我向右div（＃second-div）添加一些内容时，它会出现并向右排列到左边div（＃ads-div）。 DEMO

请帮助并告诉我正确的CSS和HTML

Answer 1

将vertical-align:top添加到班级.inline-st

.inline-st {
display: inline-block;
position: relative;
vertical-align: top;
}

Answer 2

将两个div向左浮动，查看fiddle

  #send-ads{
    float:left;
    width:613px;
    height: 235px;
    background: white;
    border:1px solid #d6d6d6;
}

    #second-div{
        float:left;
        width:150px;
        height:235px;
        background: red;
        border:1px solid #d6d6d6;
        margin-left:10px;
    }

Answer 3

将float：left添加到第二个div，它将无法正常工作

#second-div {
background: none repeat scroll 0 0 green;
float: left;
height: 235px;
width: 388px;