html - Making display:inline behaves like display:inline-block -

i'm making form 2 input area, second area should content editable div somehow.

i want make #topic_title_input sitting above #topic_content_input same width. achieved giving them display:inline-block, complicated reason, can't change display-inline property of second input area

any idea how make #topic_title_input sitting above #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 display:inline */ width:521px; display:inline;  background-color: orange; border: solid 1px black; }  /*do not change css below*/ .left_container{      position:relative;      float:left; width:50%; } .right_container{      position:relative;      float:right; width:50%; }  </style>