css - 段落とサブ段落を水平方向に揃える

Question

css を使用して次のようにデータを表示する方法はありますか?

記事は段落に分割され、各段落の右側には (通常は小さい) ボックス/サブ段落があり、それぞれの段落と水平方向に並んでいます。

Answer 1

CSS を使用すると、次のようなことができます。例

CSS

.wrapper {
    width: 500px;
    overflow: hidden;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: 30px;
    margin-left: auto;
}
.wrapper .paragraph {
    width: 225px;
    float: left;
    height: 150px;
    line-height: 150px;
    border: medium solid #000;
    text-align: center;
    vertical-align: middle;
}
.wrapper .text {
    float: right;
    width: 225px;
    height: 100px;
    line-height: 100px;
    border: medium solid #000;
    text-align: center;
    vertical-align: middle;
}

HTML

<div class="wrapper">
  <div class="paragraph">Paragraph</div>
  <div class="text">Related Text</div>
</div>
<div class="wrapper">
  <div class="paragraph">Paragraph</div>
  <div class="text">Related Text</div>
</div>