Equal Column Height

you’re pretty close. I only made a few tweeks to your code if you want to give it a shot. I added lots of notes in the css so you can kind of tell what / why i did things.

the only thing i did to the html was add a wrapper to the content class you had. to allow for more precise control of the elements within.

here is the HTML:

<div id="content-container">
    <div class="content">
      <div id="left">
        <em><big><strong>Welcome to your new SSC Website! Please explore our new features including…</strong></big></em>
        <ul>
          <li style="text-align: left;">
            <em>Quickly browse upcoming events in the new <b>SORTABLE TABLE</b> below!</em>
          </li>
          <li style="text-align: left;">
            <em>Get <b>ONE-CLICK ACCESS TO GAME SCHEDULES</b>?using this icon above!<img class="alignnone wp-image-2874" src="https://sanantoniossc.com/wp-content/uploads/2010/10/Schedule-Icon.png" alt="Schedule Icon" width="35" height="30">TIP: Select?“Remember Me” when first logging in.</em>
          </li>
          <li>
            <em>Click this icon at the top of the page to request <b>FREE GAME REMINDERS and RAIN OUT ALERTS</b> by text or email!?<img class=" wp-image-2875 alignnone" src="https://sanantoniossc.com/wp-content/uploads/2010/10/Alerts-Icon.png" alt="Alerts Icon" width="35" height="30"></em>
            </li>
        </ul>
      </div> <!-- left -->
      <div id="right">
        <a class="fasc-button fasc-size-large fasc-type-glossy fasc-rounded-medium ico-fa fasc-ico-before fa-edit" style="background-color: #616161; color: #ffffff;" href="https://www.surveymonkey.com/r/WDMQ65Q" target="_blank" data-fasc-style="background-color:#616161;color:#ffffff;">Share Your Feedback</a>
      </div> <!-- right -->
    </div><!-- content -->
</div> <!-- content-container -->

and here is the corresponding CSS:

#content-container { /* new container that spans entire screen */
    width: 100%;
    height: auto;
    background-color: #b3efff;
    border: 3px solid #4dd9ff;
    border-left: none;
    border-right: none;
    padding: 20px 0;
}

#content-container:after { /* clears the floats on the content */
    content: "";
    display: table;
    clear: both;
}

#content-container .content { /* content container that has a defined width, same as body */
    max-width: 1140px; /* this is what the body of your site is already */
    margin: 0 auto;
}

.content #right {
    float:right;
    width: 25%;
}

.content #left {
    float: left;
    width: 70%;
    margin-right: 5%;
    line-height: 1.3;
}

#left ul { /* unordered-list styles */
    font-size: 16px;
    margin-top: 14px;
    margin-left: 18px;
    color: #4A4A4A;
}

#left ul li { /* list-item styles */
    margin-bottom: 8px;
}

#left img {
    max-width: 24px; /* controls icon size */
}

#right a {
    min-width: 235px; /* make sure button doesnt collapse on resize */
    max-width: 240px; /* don't want it to get too long either */
    position: relative; /* allows movement from top to be able to position vertically. it is not responsive */
    top: 80px;
}

@media (max-width: 1140px) { /* make it break at the width of the original body */

    #content-container .content {
        max-width: 80%;
        margin: 0 auto;
    }

    .content #right {
        margin-top: 20px; /* add some space now that the left and right are stacked */
        width: 100%;
    }

    .content #left {
        width: 100%;
        margin: 0;
    }

    #right a {
        display: block;
        margin: 0 auto;
        position: inherit; /* reset position */
    }

}

i added one breakpoint in there to ensure responsiveness

You are an absolute genius. Thank you so much for your help!

youre welcome. i saw you implemented the css i provided, but please note that i modified your html slightly. i assumed you had control over that. i wrapped the entire bit with an id of ‘content-container’. without that element in place the css is somewhat useless…