Nsryjdtyk

good day, I have this issue where my bootstrap row columns are unaligned, the text is under col-8 and the image is under col-4. however even when they are in the same row the text and image is unaligned. any help would be appreciated and i have a js fiddle link for the problem.

1. 
   

   code snippet:

   
   
   

   
   

   
   
   

         <div class="col-md-8 justify_text">
   
   
   
           <span>
   
   
   
             <h4 class="bold_font color-mwc-orange">WHO WE ARE</h4>
   
             <br>
   
             <h4 class="color-mwc-blue text-height-wide2">My White Card is an innovative collaboration of the recent revolutionary healthcare approach; The first of its kind beauty, health, and wellness membership that offers an array of the best discount coupons and unlimited services in pursuit of a convenient access through a Mobile App technology. </h4>
   
             <h4 class="color-mwc-blue text-height-wide2">We offer different discount coupons from aesthetics, cosmetic surgeries, dental services, functional medicine, preventive healthcare and wellness programs from our Exclusive, Premiere and carefully curated clinics and excellent doctors in the Metro.</h4>
   
   
   
           </span>
   
         </div>
   
   
   
         <div class="col-md-4">
   
           <br><br><br>
   
           <img src="img/home_who_we_are.jpg" class="img-responsive spacer center-block">
   
         </div>
   
     </div>
   
   </div>
   
   

   
   



2. jsfiddle: https://jsfiddle.net/xp3zqLra/4/




3. current condition

4. intended layout

.row {

  display:flex;

}



.row > *

{

  align-self:end;

}

https://jsfiddle.net/xp3zqLra/6/

please delete these unnecessary br tags and also delete align-items-center class from a row.

<div class="container">

      <div class="row">



          <div class="col-md-8 justify_text">

            <span>

            <h4 class="bold_font color-mwc-orange">WHO WE ARE</h4>

            <h4 class="color-mwc-blue">My White Card is an innovative collaboration of the recent revolutionary healthcare approach; The first of its kind beauty, health, and wellness membership that offers an array of the best discount coupons and unlimited services in pursuit of a convenient access through a Mobile App technology. </h4>

            <h4 class="color-mwc-blue">We offer different discount coupons from aesthetics, cosmetic surgeries, dental services, functional medicine, preventive healthcare and wellness programs from our Exclusive, Premiere and carefully curated clinics and excellent doctors in the Metro.</h4>

          </span>

          </div>



          <div class="col-md-4">

            <img src="https://via.placeholder.com/350



C/O https://placeholder.com/" class="img-responsive spacer center-block">

          </div>

      </div>

    </div>

Here is a fiddle: https://jsfiddle.net/xp3zqLra/5/