Выровнить текст до уровня блока

С помощью css я сделал так, чтобы это выглядело так: картинка - информация, картинка и блок информации:

пример

И когда я нажимаю на изображение, информация появляется сбоку, но факт заключается в том, что если изображений много, то информация всегда будет в верхней части блока, как сейчас в примере.

Мне нужно, чтобы текст скользил вниз до уровня картинки, вот что я хочу:

пример

пожалуйста помогите

<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx1" role="tablist" aria-multiselectable="true">
   <div class="card">
      <!-- Card header -->
      <div class="card-header" role="tab" id="headingTwo_0">
         <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx0" href="#collapseTwo"
            aria-expanded="false" aria-controls="collapseTwo_0">
            <div class="collapse-participants">
               lorem
            </div>
         </a>
      </div>
      <!-- Card body -->
      <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"
         data-parent="#accordionEx0">
         <div class="card-body">
            lorem 
         </div>
      </div>
   </div>
</div>

<div class="container-tab-info">
   <div class="col-md-12">
      <div id="tab-0" class="tab-content">
         <div class="full-name">
            lorem
         </div>
      </div>
   </div>
</div>
</div>