Bootstrap 4 Base

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="task">
<div class="row">
          <div class="col-lg-4 col-sm-6 col-12 mb-5">
          	  <div class="task-box class1" 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 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="col-lg-4 col-sm-6 col-12 mb-5">
		  	  <div class="task-box class2" 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...

CSS

#task .row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
p {
  padding: 15px;
}
	#task .row > [class*='col-'] {
	  display: flex;
	  flex-direction: column;
	  align-items: stretch;
    margin-bottom: 20px;
	}

.task-box {
  position: relative;
  margin: 0 auto;
  color: rgb(95, 112, 135);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  border: 1px solid #000;
}
.task-box .task-box-inner>a[aria-expanded="true"] {
	display: none;
}
.collapse {
    left: -1px;
    position: absolute;
    width: 100.5%;
    z-index: 10;
    border: 1px solid #000;
    border-top: none;
    background-color: rgba(255, 255, 255, 1);
}