通常は2列だけど、画面幅が小さくなると2行になるテーブルっぽいレイアウト

一言で表現することばが見つからないので箇条書きで特徴を記載する

• テーブルっぽいレイアウト
• 通常は2列（左揃え右揃え）で1ペアの文字を1行で表示する
• 文字数により1行で収まらない場合は、左50%, 右50%ではなく、それぞれ100%のまま上下2行に変化する

作ったもの

    <div>
      <hr />
      <div class="box-top">
        <div class="box-left">短い質問</div>
        <div class="box-right">短い回答</div>
      </div>
      <hr />
      <div class="box-top">
        <div class="box-left">中くらいのほどほどの長さの質問</div>
        <div class="box-right">中くらいのほどほどの長さの回答</div>
      </div>
      <hr />
      <div class="box-top">
        <div class="box-left">長い文章で書かれたとてもすごく長い質問</div>
        <div class="box-right">
          長い文章で書かれたとてもすごく長い回答
        </div>
      </div>
      <hr />
    </div>

.box-top {
  display: flex;
  padding: 5px;
  margin: 5px;
  flex-wrap: wrap;
}

.box-left {
  text-align: left;
  margin-right: auto;
}

.box-right {
  text-align: right;
  margin-left: auto;
}

コードはこちら
https://codesandbox.io/s/vigorous-wood-3xwol?file=/index.html

flex-wrap: wrap;を設定し、左右の要素にはmargin-right: auto; text-align: right;とすると領域を最大化してくれるらしい。

ただの2列のテーブルレイアウトだと、文章の折返しが発生したとき画面の半分で改行されるため読みづらい。かと言ってPC表示のように横幅が潤沢にある場合は2行にするほどでもない、といった場合に使えるかも。

参考