横並びにして周りに枠線をつけたい

実現したいこと

画像のように表示させたい

【前提】
以下のHTMLにCSSを適応させる

メインの段のテキストです。 メインの段のテキストです。 メインの段のテキストです。 メインの段のテキストです。 メインの段のテキストです。 サブの段のテキストです。 サブの段のテキストです。 サブの段のテキストです。

</div> </div> </body>

ここに質問の内容を詳しく書いてください。
#contents{

background-color: orange; color: white; height: 150px; width: 200px; } #sub{ background-color: green; color: white; height: 150px; width:100px; flex-shrink: 0; } div{ display: flex; flex-direction: row-reverse; border: 5px solid red; }

以上のようなCSSをかいたところ、背景の大きさは小さくなってしまうし、周りの赤枠も、１つづつ囲まれてしまう
２つを横並びにし、かつ２つまとめて赤枠を囲む方法があれば教えていただきたいです。