Creating Side By Side Image Cards with Astro and Tailwind

Question

I am currently trying to create two image cards that are side by side with tailwind. I'm currently having a few issues, one is that the size of the text in my current codebase stretches or shrinks the images. The other one is I need to have two identical images separated but centered on the page and I'm struggling to accomplish this.

Here is my code:

import testImage from "../assets/images/test-image.webp";
import { motion } from "framer-motion";

export const About = () => {
  return (
    <section
      className="w-full bg-customDarkBg2 mt-21 mb-8 sm:mt-16 sm:mb-10 xl:mt-0 xl:m  lg:pt-0"
      id="about"
    >
      <motion.div
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 0.5, delay: 0.2 }}
      >
        <div className="flex flex-wrap 2xl:w-[1450px] xl:w-[1300px] l:w-[1000px] md:w-[1000px] sm:w-[800px] xs:w-[400px] w-11/12 mx-auto md:pl-4 xl:pr-16 xl:pl-16">

          <div className="w-full lg:mb-0">
            <h1 className="text-center mb-8 text-4xl lg:text-5xl custom-block-big-title">
              Our Team
            </h1>
          </div>
          <div className="w-3/4 mx-auto lg:w-2/3 flex flex-wrap lg:-mx-4 justify-center">
            <div className="flex flex-row space-x-15 mb-8 lg:mb-0 w-full sm:w-2/3 px-2 lg:px-0 text-white">

              <div className="items-center mb-4 py-3 pl-3 pr-2 rounded ">
                <img
                  src={testImage}
                  alt="f2"
                  className="rounded-xl custom-border-gray mx-auto sm:mx-unset"
                />
                <div className="ml-5">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
              </div>
              <div className="items-center mb-4 py-3 pl-3 pr-2 rounded">
                <img
                  src={testImage}
                  alt="f2"
                  className="rounded-xl custom-border-gray mx-auto sm:mx-unset"
                />
                <div className="text-base text-center ml-5">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
              </div>
            </div>
          </div>
        </div>
      </motion.div>
    </section >
  );
};

And here is a current picture of what the page looks like