JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.3/cerulean/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="row-container row">
  <div class="row__item">
    <div class="task-box" aria-expanded="false">
      <div class="task-box-inner">
        <h4>Lorem ipsum dolor sit amet</h4>
        <hr>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem distinctio nesciunt excepturi similique totam natus, facere corrupti quas tempora. Exercitationem dolorum incidunt soluta ipsa voluptates suscipit eum harum quae veniam.</p>
        <a class="js-show" data-toggle="collapse" href="#collapseevent-1" role="button" aria-expanded="false" aria-controls="collapseevent-1">
              Подробнее&nbsp;&nbsp;&nbsp;<i class="fa fa-plus" aria-hidden="true"></i>
            </a>
        <div class="collapse" id="collapseevent-1">
          <div class="card card-body">
            <p><i class="fa fa-users" aria-hidden="true"></i>11 человек</p>
            <p><i class="fa fa-map-marker" aria-hidden="true"></i><span>Место встречи</span></p>
            <a class="join" href="#">Присоединиться</a>
            <a data-toggle="collapse" href="#collapseevent-1" role="button" aria-expanded="true" aria-controls="collapseevent-1"><i class="fa fa-times" aria-hidden="true"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row__item">
    <div class="task-box" aria-expanded="false">
      <img class="img-fluid" src="img/event-2.jpg" alt="reportage">
      <div class="task-box-inner">
        <h4>Repudiandae ipsa quae molestiae quis sint. </h4>
        <hr>
        <p>Lorem ipsum dolor sit amet, consectetur...

CSS

.row-container {
  width: 1200px;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-flow: row wrap;
}

.row__item {
  flex: 1 1 30%;
  margin-bottom: 20px;
}

.row__item:not(:nth-child(3n)) {
  margin-right: 20px;
}

.task-box {
  position: relative;
  padding: 15px;
  color: #5f7087;
  height: 100%;
  border: 1px solid #000;
  box-sizing: border-box;
}

.banner {
  flex-basis: 100%;
  height: 300px;
  background-color: lightcoral;
}

JavaScript

var maxHeight = 0;

$(".task-box").each(function() {
  var currentBlockHeight = parseInt($(this).outerHeight(false)); // Высота с учетом padding
  if (currentBlockHeight > maxHeight) {
    maxHeight = currentBlockHeight + 2; // добавляем тощину border
  }
});


$(".collapse").on("show.bs.collapse", function() {

  let boxes = $(".task-box").not($(this).parents(".task-box"));

  let parentBox = $(this).parents(".task-box"); // родительский блок

  parentBox.attr("aria-expanded", "true").css("height", "auto"); // добавляем аттрибут для отслеживания состояния и высоту для активного блока

  boxes.each(function() {
    if ($(this).attr("aria-expanded") !== "true") {
      // если блок не открыт (false) добавляем ему фиксированую высоту
      $(this).css("height", maxHeight);
    }
  });

});

$(".collapse").on('hide.bs.collapse', function() {
  let parentBox = $(this).parents(".task-box");
  parentBox.attr("aria-expanded", "false").css("height", maxHeight);
});