How to get the horizontal-card-footer div right below other div and not at right

I want to have a structure like this:

But its not working, the image, date, title and subtitle are ok, but then do you know how to put the Image title right below the image and the view and save links below the other texts with the same margin-left of 1rem?

I have here the Example: http://jsfiddle.net/tyyj57gs/6/, the issue should be because the horizontal-card div have display flex but Im not having sucess solving that issue.

Html:

<div class="container pb-4">
  <div class="row">
    <div class="col-lg-3">
      <div class="horizontal-card">

        <img src="http://via.placeholder.com/200x100"/>
        <div class="horizontal-card-body">
          <span class="card-text">Date</span>
          <h4 class="card-title">Title</h4>
          <span class="card-text">Subtitle</span>
        </div>
          <div class="horizontal-card-footer">
          <span>Image Title</span>
          <a class="card-text status">#View</a>
          <a class="card-text status">#Save</a>

        </div>


      </div>
      </div>

CSS

.horizontal-card{
  display: flex;
  border:1px solid gray;
  margin-bottom:1rem;
  img{
    width: 200px;
    height: 100px;
    border-bottom: 2px solid red;

  }
  .horizontal-card-body{
    display: flex;
    flex-direction: column;
    margin-left:1rem;
  }


}