进行显示：内联行为类似于display：inline-block

Question

我制作了一个带有两个输入区域的表单，第二个区域应该是内容可编辑的div。

我想让#topic_title_input坐在#topic_content_input上方，宽度相同。通过给他们display:inline-block可以轻松实现，但由于某些复杂的原因，我无法更改第二个输入区域的display-inline属性

知道如何让#topic_title_input坐在#topic_content_input上面吗？

HTML

 <div class="left_container">
    <input id="topic_title_input" >
    <div id="topic_content_input" contenteditable="true" ></div>
    </div>
    <div class="right_container">
    </div>
    <div class="clear_float">
    </div>

的CSS
    

 #topic_title_input{
    width:521px;

}


#topic_content_input{

/*do not change the display:inline */
width:521px;
display:inline; 
background-color: orange;
border: solid 1px black;
}

/*do not change the css below*/
.left_container{

    position:relative; 
    float:left; width:50%;
}
.right_container{

    position:relative; 
    float:right; width:50%;
}

</style>