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 bg-image">
                    
                </div>
                <!-- End of about-content -->
            </div>
            <!-- End of about-content-wrapper -->
        </div>
        <!-- End of boundary -->

    </section>
    <!-- End of About-->

CSS

.about-content-wrapper {
    margin: 2em 0 5em;
    display: flex;
    flex-wrap: wrap;
    padding: 0 1em;
}
.about-content.bg-image {
  background-image: url(http://assets.worldwildlife.org/photos/1620/images/carousel_small/bengal-tiger-why-matter_7341043.jpg?1345548942);
  background-size: cover;
  min-height: 200px;
}
.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);
    }
}