<div class="container py-5 my-5">

  <section class="p-md-5 mx-md-5 text-center text-lg-left">

    <div class="row">

      <div class="col-lg-6 px-3 mb-3 d-flex align-item-stretch">

        <div class="card">

          <div class="card-body m-1">

            <div class="row mb-4">

              <div class="col-lg-4 d-flex mb-2 align-items-center">

                <div

                  class="avatar w-100 white d-flex justify-content-center align-items-center"

                >

                  <img

                    src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2810%29.jpg"

                    class="img-fluid z-depth-1"

                    alt="woman avatar"

                  />

                </div>

              </div>

              <div

                class="col-lg-8 text-muted d-flex flex-column justify-content-end pt-2"

              >

                <p class="mb-1"><strong>Anna Smith</strong></p>

                <p class="mb-1"><i>Product Manager</i></p>

              </div>

            </div>

            <hr />

            <div class="row">

              <p class="text-muted card-text mt-2 px-4 mb-2">

                Lorem ipsum dolor sit amet, consectetur adipiscing elit,

                sed do eiusmod tempor.

              </p>

            </div>

          </div>

        </div>

      </div>

      <div class="col-lg-6 px-3 mb-3 d-flex align-item-stretch">

        <div class="card">

          <div class="card-body m-1">

            <div class="row mb-4">

              <div class="col-lg-4 d-flex mb-2 align-items-center">

                <div

                  class="avatar w-100 white d-flex justify-content-center align-items-center"

                >

                  <img

                    src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg"

                    class="img-fluid z-depth-1"

                    alt="woman avatar"

                  />

                </div>

              </div>

              <div

                class="col-lg-8 text-muted d-flex flex-column justify-content-end pt-2"

              >

                <p class="mb-1"><strong>Lara Croft</strong></p>

                <p class="mb-1"><i>Frontend Developer</i></p>

              </div>

            </div>

            <hr />

            <div class="row">

              <p class="text-muted card-text mt-2 px-4 mb-2">

                Lorem ipsum dolor sit amet, consectetur adipiscing elit,

                sed do eiusmod tempor incididunt ut labore et dolore magna

                aliqua.

              </p>

            </div>

          </div>

        </div>

      </div>

    </div>

  </section>

</div>