使用Bootstrap 4

Question

我正在开发一个网站，我在其中一边使用Bootstrap行和列分隔文本，另一边使用图像。

我的HTML文件中有以下布局：

<div class="row">
    <div class="col-sm">
        <h1>This is a very long header with underline</h1>
        <h3>This is a subheader</h3>
        <p>This is a description</p>
    </div>
    <div class="col-sm">
        <figure class="figure">
            <img src="/assets/contentImage4.jpg" alt="Placeholder" class="img-fluid img-thumbnail content-image">
            <figcaption class="figure-caption">A caption for the above image.</figcaption>
        </figure>
    </div>
</div>

这是相关的CSS：

.figure {
  display: block;
  margin: auto;
  margin-top: 45px;
  margin-bottom: 45px;
  width: 40%;
  text-align: center;
}

h1, h2 {
  font-family: 'Work Sans', sans-serif;
  border-bottom: 4px solid black;
}

我将图形的上边距偏移了45个像素，以使图像的顶部与h1下方的黑色下划线对齐。但是，在长标题（如本案例中）中，h1包含两行，这意味着照片不再排列。是否有办法根据h1的包装方式以编程方式使其适合？