CSSで途中線が切れているボックスを描く

友人から初めてサイトのコーディング依頼を受けて喜んでいたら
凄く悩むところがあったので、友人への恨みとスキルアップの喜びを
込めて記事に残しておきます。

友人から届いたサイトデザインの一部

なんだ普通のボックスやん！簡単、簡単
、、、、

なんか途中で切れてるんですけど
そこから半日格闘！！

正しいやり方かどうかはわかりませんが、以下のような方法でできました。

index.html

          <div class="contact-form-box contact-form-centerbox">
            <div class="flex contact-form-address">
              <p>
                500 Terry Francois St.<br />
                San Francisco<br />CA 94158
              </p>
            </div>
          </div>

style.css

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-form-box{
  max-width: 320px;
  width: calc(100%/3);
  height: 300px;
}
.contact-form-address{
  /* ここで枠線の高さを変えている */
  height: 90%;
  width: 100%;
  box-sizing: border-box;
  border-right: 1px solid;
  border-left: 1px solid;
}
.contact-form-address{
  height: 90%;
  width: 100%;
  box-sizing: border-box;
  border-right: 1px solid;
  border-left: 1px solid;
}

結果
（SNSのアイコンが違うのは見なかった事に）

positin:absolute;
top:-10px;
とか色々試したんですがうまくいかず、この方法でなんとかできました。
他に何か良い方法があればご教授いただきたいです。

ここまで読んでいただきありがとうございました。