嗨，我正在创建一个页面，我需要实现这一点

这是我的密码：

var newHeight = $('.scan').height();
$('.new').css('margin-top', newHeight-40);

img{
    width: 100px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="container" style="margin-top: 30px">
  <div class="row">
    <div class="col-sm">
      <img src="Scan.png" class="scan" >
      <span>
      <h4><b>Scan</b></h4>
        <ul>
            <li> System Diagnostic (ASD) tool </li>
            <li>Siebel Comms Product Catalog Assessment</li>
        </ul>
      </span>
    </div>

    <div class="col-sm new">
      <img src="Transfer.png">
      <span>
      <h4>Design The <b>Transformation</b> </h4>
        <ul>
            <li>DX4C Fit Gap Assessment</li>
            <li>Simplification Heatmap</li>
            <li>Interface Mapping tool </li>
            <li>MVP Solution Builder tool</li>
        </ul>
      </span>
    </div>
    <div class="col-sm">
      <img src="Aspire.png">
      <span>
      <h4><b>Aspire</b></h4>
        <ul>
            <li>Value Cockpit</li>
            <li>KPIs</li>
        </ul>
      </span>
    </div>
    <div class="col-sm new">
      <img src="Roadmap.png">
      <span>
      <h4><b>Roadmap(& Business Case)</b></h4>
        <ul>
            <li>Roadmap simulator</li>
            <li>Business case simulator</li>
        </ul>
      </span>
    </div>
    <div class="col-sm">
      <img src="Execute.png">
      <span>
      <h4><b>Execute</b></h4>
        <ul>
            <li>Data Migration Utility (Cloud Connect DX4C)</li>
            <li>Catalog synchronization tool</li>
            <li>DevSecOps CI/CD pipelines</li>
            <li>Code Review tool</li>
            <li>Automation Test Framework</li>
        </ul>
      </span>
    </div>
  </div>
</div>

我得到的结果是这样的

这里我的问题是我的文字是下来的图片，但我想这些文字旁边的图片，而且我不知道如何添加水平线。
如何达到我第一张照片的效果？