JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col">
  <div class="item" style="height: 670px;">
  <div class="view-mode-featured summary-style-visible">
    <div class="front-illustration-image">
      <div class="field field-name-field-main-image field-type-field-collection field-label-hidden">
        <div class="field-items">
          <div class="field-item even">
            <a href="">
              <img src="https://www.imagesource.com/wp-content/uploads/2019/06/Rio.jpg">
            </a>
          </div>
        </div>
      </div>
      <div class="group-content-group field-group-div">
        <div class="field field-name-field-title-prefix field-type-text field-label-hidden">
          <div class="field-items">
            <div class="field-item even">Prefix</div>
          </div>
        </div>
        <h2 class="title">
          <a href="" class="node-title-link">
            <div class="field-name-title">
              <div class="">– Text </div>
            </div>
          </a>
        </h2>
        <div class="field field-name-field-intro-text field-type-text-long field-label-hidden">
          <div class="field-items">
            <div class="field-item even">– En gledens dag for alle med et bankende hjerte for villaksen, sier generalsekretær Eldar Berli i NJFF.</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
</div>

CSS

body{
  background:#ddd;
}
img {
    width: 100%;
}

.col{
  float: left;
  width: 33.33333%;
}
.field{ flex: 0 0 auto;/* avoids those extra large empty gaps */}

.view-mode-featured {
    height: 100%;
}

.front-illustration-image {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.group-content-group {
    flex: 1;
    flex-direction: column;
    display: flex;
    background:white;
    padding: 1rem;
    border-bottom: 2px solid white;
    display: flex;
    flex-direction: column;
    border-bottom: 2px solid #999999;
}