Css 两列div展开，其中包含内容

我试图创建一个页面，在内容div中包含两个div作为列。虽然我知道这是一个经常在这里被问到的问题，但区别在于，我需要左边是右边相应内容的标题，但右边的内容将在高度上有所区别，我需要这一点来影响下面左边的下一个标题将出现的位置

下面是我希望它如何工作的图像，以及我猜它是如何完成的？

目前，我正在用HTML表格做这件事，我们都知道这很混乱

非常感谢

迪伦试试这个

table
{
    border:none;
}
table td:first-child
{
    border-right:2px solid #000;
    text-align:right;
}
table td
{
    padding:10px;
    vertical-align:top;
    min-width:100px;
}

---

没有表格，我们可以这样做：

<div id="master">
    <div class="title">TITLE A</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac velit risus. Donec et libero erat. Pellentesque eros libero, lobortis eu diam accumsan, commodo tincidunt diam. Integer nec tincidunt dui.</div>
    <div class="magicClear"></div>
    <div class="title">TITLE B</div>
    <div class="content">Tiny content with tiny height</div>
    <div class="magicClear"></div>
    <div class="title">TITLE C</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac velit risus. Donec et libero erat. Pellentesque eros libero, lobortis eu diam accumsan, commodo tincidunt diam. Integer nec tincidunt dui.</div>
    <div class="magicClear"></div>
</div>

---

如果使用了表格标记，则可以将其转换为常规标记，并使用显示：表格/表格单元格：

演示： 标题>内容的HTML块。需要多少就用多少。

---

你也可以做一些流动的，引导灵感

<div>
  <div class="row">
    <div class="span2">
      <p>Title A</p>
    </div>
    <div class="span10">
      <p>Very long content</p>
    </div>
  </div>
  <div class="row">
    <div class="span2">
      <p>Title B</p>
    </div>
    <div class="span10">
      <p>Another very long content</p>
    </div>
  </div>
</div>

---

您必须调整页边距/填充，但仅此而已。

输入代码或制作小提琴正如我所说，这是一个简单的HTML表格，仅此而已。我不认为我需要补充，因为每个人都知道它包含什么。非常感谢！这就是我需要的解决方案！

<article>
  <h1>titre</h1>
  <div>
    <p>text</p>
    <p>and text again</p>
  </div>
</article>

article {
  display:table;
  table-layout:fixed;
/* tune next 2 rules */
  width:80%;
  margin:auto;
}
article h1,
article div {
  display:table-cell;
  padding:0.5em;
}
article h1 {
  width:15%;
  border-right:solid;
}

<div>
  <div class="row">
    <div class="span2">
      <p>Title A</p>
    </div>
    <div class="span10">
      <p>Very long content</p>
    </div>
  </div>
  <div class="row">
    <div class="span2">
      <p>Title B</p>
    </div>
    <div class="span10">
      <p>Another very long content</p>
    </div>
  </div>
</div>

[class*="span"] {
  float: left;
}
.span2 {
  width: 20%;
}
.span10 {
  width: 80%;
}
.span2 p {
  float: right;
}