Position item in a container

Question

I am working on a new project where I have 4 testimonials displayed in a carousel. I want to have the user details displayed in the same spot on every slide of the carousel. However, the sections will be different on every slide since the testimonials don't have the same length.

Here is an image of my desired result.

What is the best way to do this?

Kind regards,

.asked {
  height: 450px;
  padding: 50px;
  background: #152026;
  transition: all 0.3s;
  border-radius: 10px;
  position: relative;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  border: 5px solid transparent;
}

#pricingbox {
  height: 100%;
}

.user {
  position: absolute;
  margin-top: 20px;
}

<div class="row">
  <div class="col-xl-8 mx-auto">
    <div class="testimonial owl-carousel">
      <div class="asked">

        <p>“I joined a few months back and this group has helped me become successful in copping many drops - Yeezy, Off-White, Supreme, etc. Didn’t know becoming a reseller was in a league of its own. Also, BRICKS don’t exist here. We profit off everything!”</p>

        <section class="user">
          <div class="media align-items-center">
            <img class="mr-4 align-self-center" src="assets/img/user.png" alt="">
            <div class="media-body">
              <h3>SilveR</h3>
              <h4>Nexus Resell Member</h4>
            </div>
          </div>
        </section>
      </div>
      <div class="asked">

        <p>“This group has really helped me make a lot of profit, everyone is really friendly and helpful.”</p>


        <section class="user">
          <div class="media align-items-center">
            <img class="mr-4 align-self-center" src="assets/img/user.png" alt="">
            <div class="media-body">
              <h3>xDyzzii</h3>
              <h4>Nexus Resell Member</h4>
            </div>
          </div>
        </section>
      </div>
      <div class="asked">

        <p>“Been in the group since beta, friendly staff and users, very good atmosphere top info and support”</p>

        <section class="user">
          <div class="media align-items-center">
            <img class="mr-4 align-self-center" src="assets/img/user.png" alt="">
            <div class="media-body">
              <h3>Ravio</h3>
              <h4>Nexus Resell Member</h4>
            </div>
          </div>
        </section>
      </div>
      <div class="asked">

        <p>“Best cook group I have been a part of. Extremely professional and success driven. Always has someone there to help. Tons of knowledge and tips...best cook group online”</p>


        <section class="user">
          <div class="media align-items-center">
            <img class="mr-4 align-self-center" src="assets/img/user.png" alt="">
            <div class="media-body">
              <h3>Mwilmore</h3>
              <h4>Nexus Resell Member</h4>
            </div>
          </div>
        </section>
      </div>
    </div>

  </div>
</div>

Answer 1

Using display: flex you can keep the paragraph of text aligned to the top and the user information aligned to the bottom.

I removed position: absolute; from the .user section.

.asked {
        height: 200px;
        padding: 50px;
        background: #152026;
        transition: all 0.3s;
        border-radius: 10px;
        position: relative;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        border: 5px solid transparent;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #pricingbox{
        height: 100%;
    }

    .user{
        margin-top: 20px;
    }

<div class="row">
                <div class="col-xl-8 mx-auto">
                    <div class="testimonial owl-carousel">
                        <div class="asked">
                            
                            <p>“Best cook group I have been a part of. Extremely professional and success driven. Always has someone there to help. Tons of knowledge and tips...best cook group online”</p>
                            
                            
                            <section class="user">
                            <div class="media align-items-center">
                                <img class="mr-4 align-self-center" src="assets/img/user.png" alt="">
                                <div class="media-body">
                                    <h3>Mwilmore</h3>
                                    <h4>Nexus Resell Member</h4>
                                </div>
                            </div>
                            </section>
                        </div>
                    </div>

                </div>
            </div>