как выровнять элементы на конце наложения изображения с несколькими текстовыми элементами, оставаясь в блоке

Question

Я пытаюсь создать изображение с наложенным на него текстом (H3 над ap) и отображать этот текст в левом нижнем углу, не разбивая блок и не вставляя строку (то, что я сейчас вижу с моим кодом) Любая идея, что яотсутствует и почему эти два блока текста изменяются на встроенные и отображаются рядом внизу?

<div class="col-4 p-0">
   <img src="imgs/design.jpg" class="img-fluid">
   <div class="card-img-overlay d-flex align-items-end">
      <h4 class="card-title">What Next?</h4>
      <p class="card-text">Is this the end?</p>
   </div>
</div

Answer 1

//HTML

      <div class="card h-100">
           <img src="/photos/dummy-01.jpg" class="card-img" alt="" />                                 
           <div class="card-img-overlay d-flex flex-column justify-content-end align-items-start">
                <h5 class="card-title">MBA</h5>
                <div class="card-text">
                    <p>Executive</p>
                </div>
           </div>
        </div>

    //Styling 

        .card{
           width: 100%;
           border-radius: 0;
           border: 0;
           margin-bottom: 20px;
           overflow: hidden

           .card-img{    
               height: 100%;
               width: 100%;
               object-fit: cover;
               transition: all 0.4s linear;
           }

           .card-img-overlay {
               position: absolute;
               top: 0;
               right: 0;
               bottom: 0;
               left: 0;
               padding: 1.25rem;
           }
        }