How to align left and right div element inside a Two Column Layout?

Issue

I am having some difficulty with aligning Divs side by side. For example, here is an image of the issue I am seeing: image. As you can see, the first "This is about Tennis" is aligned with "This is about Basketball" but the second "This is about Basketball" is NOT aligned with "This is about Tennis". I think the issue is because the description for "This is about Tennis" is lesser than the description about "This is about Basketball".

Is there a way using CSS to always align the left and right divs on the same line, no matter if the description for one is shorter or longer than the other?

I have tried using the display: grid property, on .newsLetterDiv class, but that didn't resolve the issue.

.newsLetterDiv {
  width: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

<div class="TwoColumnUnit">
    <div class="col-md-6 col-xs-12 TwoColumnUnit_Left">
        <div class="newsLetterDiv">
            <div class="col-sm-12 col-md-12">
                <div class="left_Side">
                    <i class="fas fas fa-route"></i>
                    <h3>This is about Tennis</h3>
                </div>
                <div class="right_Side">
                    <p><span>Tennis is a racket sport that is played either individually against a single opponent or between two teams of two players each.&nbsp;</span></p>
                </div>
            </div>
        </div>
        <div class="newsLetterDiv">
            <div class="col-sm-12 col-md-12">
                <div class="left_Side">
                    <i class="fas fas fa-basketball"></i>
                    <h3>This is about Basketball</h3>
                </div>
                <div class="right_Side">
                    <p><span>Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.</span></p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xs-12 TwoColumnUnit_Right">    
        <div class="newsLetterDiv">
            <div class="col-sm-12 col-md-12">
                <div class="left_Side">
                    <i class="fas fas fa-basketball"></i>
                    <h3>This is about Basketball</h3>
                </div>
                <div class="right_Side">
                    <p><span>Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.</span></p>
                </div>
            </div>
        </div>
        <div class="newsLetterDiv">
            <div class="col-sm-12 col-md-12">
                <div class="left_Side">
                    <i class="fas fas fa-route"></i>
                    <h3>This is about Tennis</h3>
                </div>
                <div class="right_Side">
                    <p><span>Tennis is a racket sport that is played either individually against a single opponent or between two teams of two players each.&nbsp;</span></p>
                </div>
            </div>
        </div>
    </div>
</div>

Solution

Code snippet below should do it. Just remove the borders from the boxes. The JavaScript is dynamically adjusting the heights of the boxes to match the height of the tallest box in each pair.

function setEqualHeight() {
  var pairs = [document.querySelector('.TwoColumnUnit_Left'), document.querySelector('.TwoColumnUnit_Right')];
  pairs.forEach(function(pair) {
    if (pair) {
      var boxes = pair.getElementsByClassName('newsLetterDiv');
      var maxHeight = 0;
      Array.from(boxes).forEach(function(box) {
        box.style.height = ''; // Reset
        maxHeight = Math.max(maxHeight, box.offsetHeight);
      });
      Array.from(boxes).forEach(function(box) {
        box.style.height = maxHeight + 'px';
      });
    }
  });
}

window.onload = setEqualHeight;
window.onresize = setEqualHeight;

.TwoColumnUnit {
  display: flex;
}

.TwoColumnUnit_Left,
.TwoColumnUnit_Right {
  flex: 1;
}

.newsLetterDiv {
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
}

<div class="TwoColumnUnit">
  <div class="col-md-6 col-xs-12 TwoColumnUnit_Left">
    <div class="newsLetterDiv">
      <p><span>Tennis is a racket sport that is played either individually against a single opponent or between two teams of two players each.&nbsp;</span></p>
    </div>
    <div class="newsLetterDiv">
      <p><span>Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.</span></p>
    </div>
  </div>
  <div class="col-md-6 col-xs-12 TwoColumnUnit_Right">
    <div class="newsLetterDiv">
      <p><span>Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.</span></p>
    </div>
    <div class="newsLetterDiv">
      <p><span>Tennis is a racket sport that is played either individually against a single opponent or between two teams of two players each.&nbsp;</span></p>
    </div>
  </div>
</div>

Answered By - Jacob