儿童瓷砖内的布尔玛填充盒

Question

我有following tiling setup。如何使用文本 Some Text 填充第一个图块下可用的剩余空间，以匹配后面两个较窄图块的高度？我想将图片下方的内容区域扩展到右边两个图块的高度，让它们都均匀。

<div class="tile is-ancestor">
  <div class="tile is-parent is-6">
    <div class="tile is-child ">
      <figure>
        <img src="https://bulma.io/images/placeholders/640x320.png">
      </figure>
      <div class="box">
        <h1 class="title">One</h1>
        <h6 class="subtitle is-7">Some Text</h6>
        <nav class="level">
          <div class="level-left">
            <div class="level-item">
              <font-awesome-icon :icon="iconUser" transform="shrink-3" class="icon-violet" />
              <a href="#">dd</a>
            </div>
            <div class="level-item">
              <a href="#">Today</a>
            </div>
          </div>
        </nav>
      </div>
    </div>
  </div>

  <div class="tile is-parent">
    <div class="tile is-child ">
      <figure>
        <img src="https://bulma.io/images/placeholders/640x320.png">
      </figure>
      <div class="box">
        <h1 class="title">One</h1>
        <h6 class="subtitle is-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque dictum semper. Donec ornare ullamcorper velit, sagittis venenatis neque varius mattis. Suspendisse et lectus sed neque tincidunt convallis. Curabitur feugiat diam non tortor
          hendrerit, id mattis dui laoreet...</h6>
        <nav class="level">
          <div class="level-left">
            <div class="level-item">
              <a href="#">dd</a>
            </div>
            <div class="level-item">

              <a href="#">Today</a>
            </div>
          </div>
        </nav>
      </div>
    </div>
  </div>

  <div class="tile is-parent">
    <div class="tile is-child ">
      <figure>
        <img src="https://bulma.io/images/placeholders/640x320.png">
      </figure>
      <div class="box">
        <h1 class="title">One</h1>
        <h6 class="subtitle is-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque dictum semper. Donec ornare ullamcorper velit, sagittis venenatis neque varius mattis. Suspendisse et lectus sed neque tincidunt convallis. Curabitur feugiat diam non tortor
          hendrerit, id mattis dui laoreet...</h6>
        <nav class="level">
          <div class="level-left">
            <div class="level-item">
              <a href="#">dd</a>
            </div>
            <div class="level-item">
              <a href="#">Today</a>
            </div>
          </div>
        </nav>
      </div>
    </div>
  </div>
</div>

CSS

img
  height: 160px
  width: 100%
  display: block
  object-fit: cover