JSFiddle - React, Tailwind, and code Playground

HTML

<section id="about">
        <div class="boundary">
            <div class="about-content-wrapper">
                <div class="about-content">
                    <h2>About</h2>
                    <p>Use this section to tell a story about your business. Everything you see here is responsive and mobile-friendly - it will look great on smartphones and tablets.</p>
                    <ul>
                        <li>Use lists if you want to.</li>
                        <li>Use basic HTML</li>
                        <li>Use different <b>styling</b> and typography.</li>
                    </ul>
                </div>
                <!-- End of about-content -->
                <div class="about-content">
                    <img...

CSS

.about-content-wrapper {
    margin: 2em 0 5em;
    display: flex;
    flex-wrap: wrap;
    padding: 0 1em;
}
.about-content {
    border: 2px solid red;
    box-sizing: border-box;
}
.about-content img {
    max-width: 100%;
    height: auto;
}
.about-content h2,
.about-content p {
    margin: 0 1em 0 1em;
}

@media (min-width: 201px) {
    .about-content {
        min-width: 200px;
        max-width: calc(50% - 2em);
    }
}