我想创建如下所示的Flex样式用户界面

到目前为止，我所能做的是使用col-5 col-2 col-5从bootstrap中拆分UI，并使用flex创建col-5 UI部分（左侧和右侧），以下是我的代码

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-5">
                        <div class="d-flex align-items-start">
                            <div class="avatar me-75">
                                <i data-feather="upload" class=avatar-icon></i>
                            </div>
                            <div>
                                <p class="mb-0">Lorem ipsum</p>
                                <p>lorem ipsum dolor sit amet lorem ipsum</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-2">
                        <div class="d-flex" style="height: 50px;">
                            <div class="vr"></div>
                        </div>
                    </div>
                    <div class="col-5">
                        <div class="d-flex align-items-start">
                            <div class="avatar me-75">
                                <i data-feather="user-plus" class=avatar-icon></i>
                            </div>
                            <div>
                                <p class="mb-0">Lorem ipsum</p>
                                <p>lorem ipsum dolor sit amet lorem ipsum</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

结果如下

结果与我的期望不符，是否有bootstrap中的某个类我没有添加？或者是否有其他方法可以获得我想要的模拟结果？