无法并排堆叠两个div

Question

<div>
    <div>
        <div style="margin-right: 13px; display: inline-block;">
            <h3>Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum</h3>
        </div>
        <div style="float: right; position: relative;">
            <i>X</i>
        </div>
    </div>

    <div class="horizontalDivider></div>
        <ul ></ul>
</div>

问题是（＆＃39; X＆＃39;）不会停留在水平线正上方的位置。

我能够在一定程度上管理百分比，但这会导致响应式。

例如http://jsfiddle.net/furqanms/qrphjs7y/，请调整结果窗格的大小，您会发现＆＃39; X＆＃39;正在包装到下一行。

请帮忙解决此问题。

由于

Answer 1

您不需要使用浮动，表格布局将帮助您轻松创建布局。

.container {
  width: 300px;
  height: 200px;
  padding: 5px;
  background: orange;
  border: 2px solid black;
}
.header {
  display: table;
  table-layout: fixed;
  border-spacing: 5px;
  border-bottom: 2px solid black;
}
.title,
.close {
  display: table-cell;
}
h3 {
  margin: 10px 0;
}

<div class="container">
  <div class="header">
    <div class="title">
      <h3>Box title goes here and it can run on for longer than this single line could possibly contain</h3>
    </div>
    <div class="close">
      X
    </div>
  </div>
  <div class="content">
  </div>
</div>

Answer 2

以下更改解决了我的问题：

<div>
    <div>
        <div style="**width:90%;** display: inline-block;">
            <h3>Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum</h3>
        </div>
        <div style="**width:10%;** position: relative;">
            <i style="**float: right**;" >X</i>
        </div>
    </div>

    <div class="horizontalDivider></div>
        <ul ></ul>
</div>