Bootstrap如何更改col边框的样式

Bootstrap我想要的效果是

img

请问大家如何使右侧border上下都留出一定距离，并且在中间加上一个箭头icon

问题相关代码
HTML

<div class="container">
  <div class="row problem-solution">
    <div class="col-12 col-lg-4 no-gutters px-0">
      <img src="./assets/img/women-empowerment-img.png" class="img-fluid mx-auto w-100">
    </div>
    <div class="col-12 col-lg-4 pt-5 px-5 text-white border-right">
      <h3>Women's Empowerment</h3>
      <p class="pt-4"><b>The Problem</b></p>
      <p>INA aims for woman and girls to be economically independent, participating in decision making, holding positions of leadership and living free from violence.</p>
    </div>
    <div class="col-12 col-lg-4 pt-5 px-5 text-white">
      <h2><br/></h2>
      <p class="pt-4"><b>The Solution</b></p>
      <p>Women could increase their income globally by up to 76% if the employment participation and wage gaps between women and men were closed.</p>
    </div>
  </div>
</div>

CSS

.problem-solution {
    background-color: #4E878F;
}

.border-right {
    border-right: 1px solid white;
    margin: 20px 0 20px 0; 
}
现在只能做出下图的效果

img


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .text-with-hr {
            position: relative;
            z-index: 2;
        }
        .text-with-hr:before {
            position: absolute;
            content: '';
            left: 20px;
            height: 250px;
            border-left: 1px solid #d4d4d4;
            z-index: -1;
        }
        .text-with-hr span {
            display: inline-block;
            background: white;
            position: absolute;
            padding: 10px;
            top: 100px;
            left: 2px;
        }
    </style>
</head>
 
<body>
    <div class="text-with-hr">
        <span>-></span>
    </div>
</body>