ボックスを画像のようなデザインにしたい

画像のようなデザインを実現したい

現状

このようになっていまして、どのようにしたらいいのかわからないのが現状になります。

コード

<div class="reserve_order"> <div class="reserve_order_number">ご利用される日にちを教えてください</div> <p class="reserve_description">テスト</p> </div>

.reserve_order { /* margin: 2em auto; ボックスの余白 */ padding:2em; /* ボックス内側余白 */ position:relative; /* 配置(ここを基準に) */ border: 2px solid #736f66; /* ボックスの線 (太さ　種類　色)*/ width:35%; } .reserve_order_number { background-color:#f0f1ec; /* タイトル背景色 */ font-size: 16px;/* タイトル文字の大きさ */ font-weight: 800; color: #736f66; /* タイトル文字色 */ padding: 0 5px;/*タイトルの余白*/ line-height: 1;/*タイトルの行の高さ*/ position:absolute; /* 配置(ここを動かす) */ top: -5px; /*上から（-5px）移動*/ left: 20px; /*左から(20px)移動*/ }

どなたか教えていただけると幸いです。
よろしくお願いいたします。