Resolved: Why do two different divs with 100% total width make one go down and not side by side?

  <div class="s2-r1">
    <img decoding="async" src="./Images/information-orientation.jpg" alt="student orientation">
    <div class="r-content">
      <h2>Orientation date</h2>
      <p>Tue 10/11 & Wed 10/12: 8am-3pm</p>
      <a href="3" class="more">Read more</a>
    </div>
  </div>

.r-content {
    width: 65%;
}

.section2-right img {
    width: 35%;
    height: auto;
    margin: 16px 16px;
}

.s2-r1 {
  background-color: skyblue;
  
  /* that's all you need */
  display: flex;
}

.r-content {
  width: 65%;
}

.s2-r1 .placeholder {
  width: 35%;
  height: auto;
  margin: 16px 16px;
  color: red;
  background-color: pink;
}

<div class="s2-r1">
  <div class="placeholder">Placeholder for Image</div>
  <div class="r-content">
    <h2>Orientation date</h2>
    <p>Tue 10/11 & Wed 10/12: 8am-3pm</p>
    <a href="3" class="more">Read more</a>
  </div>
</div>