作ったもの

    <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行にするほどでもない、といった場合に使えるかも。

参考