<article class="pt-moderncard">
  <section class="pt-moderncard__meta">
     <img class="pt-moderncard__image" src="https://images.unsplash.com/photo-1507878866276-a947ef722fee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=30" alt="Image">
  </section>

  <section class="pt-moderncard__main">
    <div class="pt-moderncard__body">
      <header class="pt-moderncard__head">
        <h1 class="pt-moderncard__headline">
          Headline
        </h1>
        <p class="pt-moderncard__subhead">
          Subline
        </p>
      </header>

      <p class="pt-moderncard__excerpt">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </p>
    </div>

    <footer class="pt-moderncard__footer">
      <ul class="pt-moderncard__list">
        <li class="pt-moderncard__listitem">
          <svg class="pt-moderncard__icon" viewBox="0 0 384 512" id="map-marker" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M192 0C85.903 0 0 86.014 0 192c0 71.117 23.991 93.341 151.271 297.424 18.785 30.119 62.694 30.083 81.457 0C360.075 285.234 384 263.103 384 192 384 85.903 297.986 0 192 0zm0 464C64.576 259.686 48 246.788 48 192c0-79.529 64.471-144 144-144s144 64.471 144 144c0 54.553-15.166 65.425-144 272zm-80-272c0-44.183 35.817-80 80-80s80 35.817 80 80-35.817 80-80 80-80-35.817-80-80z"></path></svg>          Location
        </li>

        <li class="pt-moderncard__listitem">
          <svg class="pt-moderncard__icon" viewBox="0 0 384 512" id="map-marker" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M192 0C85.903 0 0 86.014 0 192c0 71.117 23.991 93.341 151.271 297.424 18.785 30.119 62.694 30.083 81.457 0C360.075 285.234 384 263.103 384 192 384 85.903 297.986 0 192 0zm0 464C64.576 259.686 48 246.788 48 192c0-79.529 64.471-144 144-144s144 64.471 144 144c0 54.553-15.166 65.425-144 272zm-80-272c0-44.183 35.817-80 80-80s80 35.817 80 80-35.817 80-80 80-80-35.817-80-80z"></path></svg>          Date
        </li>

        <li class="pt-moderncard__listitem">
          <svg class="pt-moderncard__icon" viewBox="0 0 384 512" id="map-marker" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M192 0C85.903 0 0 86.014 0 192c0 71.117 23.991 93.341 151.271 297.424 18.785 30.119 62.694 30.083 81.457 0C360.075 285.234 384 263.103 384 192 384 85.903 297.986 0 192 0zm0 464C64.576 259.686 48 246.788 48 192c0-79.529 64.471-144 144-144s144 64.471 144 144c0 54.553-15.166 65.425-144 272zm-80-272c0-44.183 35.817-80 80-80s80 35.817 80 80-35.817 80-80 80-80-35.817-80-80z"></path></svg>          Time
        </li>

        <li class="pt-moderncard__listitem">
          <svg class="pt-moderncard__icon" viewBox="0 0 384 512" id="map-marker" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M192 0C85.903 0 0 86.014 0 192c0 71.117 23.991 93.341 151.271 297.424 18.785 30.119 62.694 30.083 81.457 0C360.075 285.234 384 263.103 384 192 384 85.903 297.986 0 192 0zm0 464C64.576 259.686 48 246.788 48 192c0-79.529 64.471-144 144-144s144 64.471 144 144c0 54.553-15.166 65.425-144 272zm-80-272c0-44.183 35.817-80 80-80s80 35.817 80 80-35.817 80-80 80-80-35.817-80-80z"></path></svg>          Category
        </li>
      </ul>
    </footer>
  </section>
</article>

.pt-moderncard {
  display: flex;
  background: white;
  height: 335px;
}

.pt-moderncard__main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-basis: 50%;
  padding: 1em;
}

.pt-moderncard__meta {
  flex-basis: 50%;
  position: relative;
}

.pt-moderncard__headline {
  margin-top: 0;
}

.pt-moderncard__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pt-moderncard__list {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.pt-moderncard__icon {
  width: 20px;
  height: 13px;
}


/* general page setup */
* {
  box-sizing: border-box;
}

body {
  background: grey;
  display: grid;
  grid-template-columns: 400px 400px;
}