How can I create a new line after a flex element?

I am trying to add a list of different posts on my website. So I have created different divs and added an image and some text to it. But here is the Problem:

I want the Heading to be on top, then the text under it and at the bottom should be the redirection.

Here is my index.php:

<body>
    <header>
      
<!-- The header is not important (would be too much code) -->

    </header>

    <div class="blog-post">
        <div class="blog-post_img">
          <img id="newyork" src="../../../../img/newyork.jpg" alt="New York wurde nicht gefunden!">
        </div>
        <div class="blog-post_info">

        </div>
        <h1 class="blog-post_title">New York</h1>
        <p class="blog-post_text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

        <a href="new-york/" class="blog-post_cta">Mehr..</a>
    </div>
  </body>

And my style.css:

html{font-family: 'Roboto', sans-serif;;}

body{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  background-color: #f5f5f5;
}

.blog-post{
  width: 100%;
  max-width: 58rem;
  padding: 5rem;
  max-height: 18rem;
  background: white;
  box-shadow: 0 1.4rem 8rem rgba(0, 0, 0, .2);
  display: flex;
  align-items: center;
}

.blog-post_img{
  min-width: 35rem;
  max-width: 35rem;
  transform: translateX(-8rem);
  position: relative;
}

.blog-post_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: .8rem;
  display: block;
}

.blog-post_img::before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  box-shadow: .5rem .5rem 3rem 1px rgba(0, 0, 0, .05);
  border-radius: .8rem;
}

I have tried to change display: flex to other types of display, but none of them works as I want it to work.

Solution

was such a result needed? I created a blog-post-content class wrapping the post content with it.

html{font-family: 'Roboto', sans-serif;}

body{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  background-color: #f5f5f5;
}

.blog-post{
  width: 100%;
  max-width: 58rem;
  padding: 5rem;
  max-height: 18rem;
  background: white;
  box-shadow: 0 1.4rem 8rem rgba(0, 0, 0, .2);
  display: flex;
  align-items: center;
}

.blog-post_img{
  min-width: 35rem;
  max-width: 35rem;
  transform: translateX(-8rem);
  position: relative;
}

.blog-post_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: .8rem;
  display: block;
}

.blog-post_img::before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  box-shadow: .5rem .5rem 3rem 1px rgba(0, 0, 0, .05);
  border-radius: .8rem;
}

.blog-post-content {
  display: flex;
  flex-direction: column;
}

<body>
    <header>
      
<!-- The header is not important (would be too much code) -->

    </header>

    <div class="blog-post">
        <div class="blog-post_img">
          <img id="newyork" src="../../../../img/newyork.jpg" alt="New York wurde nicht gefunden!">
        </div>
        <div class="blog-post_info">

        </div>
        <div class="blog-post-content">
        <h1 class="blog-post_title">New York</h1>
        <p class="blog-post_text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

        <a href="new-york/" class="blog-post_cta">Mehr..</a>
        </div>
    </div>
  </body>