<div class="content">
  <div class="activity-card-wrapper">
    <div class="activity-card">
      <div class="activity-card__img-wrapper">
        <img src="https://picsum.photos/300/300" alt="1"> 
      </div> 
      <div class="activity-card__title-area flexible-height">
        <div class="title">
          Title 47
        </div>
      </div> 
      <div class="activity-card__subtitle-area">
        <div class="creator">1</div>
      </div>
    </div>
  </div>
  
  <div class="activity-card-wrapper">
    <div class="activity-card">
      <div class="activity-card__img-wrapper">
        <img src="https://picsum.photos/300/300" alt="1"> 
      </div> 
      <div class="activity-card__title-area flexible-height">
        <div class="title">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum atque veritatis, tempore sed in quaerat veniam consectetur, quos maxime harum ullam dolor, voluptates animi quo laboriosam similique facere beatae recusandae?
        </div>
      </div> 
      <div class="activity-card__subtitle-area">
        <div class="creator">1</div>
      </div>
    </div>
  </div>
  
  <div class="activity-card-wrapper">
    <div class="activity-card">
      <div class="activity-card__img-wrapper">
        <img src="https://picsum.photos/300/300" alt="1"> 
      </div> 
      <div class="activity-card__title-area flexible-height">
        <div class="title">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum atque veritatis, tempore sed in quaerat veniam consectetur, quos maxime harum ullam dolor, voluptates animi quo laboriosam similique facere beatae recusandae?
        </div>
      </div> 
      <div class="activity-card__subtitle-area">
        <div class="creator">1</div>
      </div>
    </div>
  </div>
  
  <div class="activity-card-wrapper">
    <div class="activity-card">
      <div class="activity-card__img-wrapper">
        <img src="https://picsum.photos/300/300" alt="1"> 
      </div> 
      <div class="activity-card__title-area flexible-height">
        <div class="title">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum atque veritatis, tempore sed in quaerat veniam consectetur, quos maxime harum ullam dolor, voluptates animi quo laboriosam similique facere beatae recusandae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ducimus omnis labore, similique praesentium pariatur iusto quis suscipit quasi quo dignissimos magnam veritatis consequatur et sit eos aut eligendi minima.
        </div>
      </div> 
      <div class="activity-card__subtitle-area">
        <div class="creator">1</div>
      </div>
    </div>
  </div>
</div>
.content{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.activity-card-wrapper{
  display: flex;
  flex-direction: row;
  padding-bottom: 10px;
  width: calc(50% - 16px);
  background: #fff;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
  border-radius: 4px;
  margin: 8px 8px 16px;
  
  @media (min-width: 640px){
    width: calc(33.33333% - 16px);
  }
  
  @media (min-width: 1024px){
    width: calc(25% - 16px);
  }
}

.activity-card{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.activity-card__img-wrapper{
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  border-radius: 8px;
  
  img{
    transform: translate(-50%,-50%);
    width: 100%;
    top: 50%;
    left: 50%;
    position: absolute;
  }
}

.activity-card__title-area{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 10px;
    padding: 0 10px;
  
    .title{
          font-size: 15px;
      font-weight: 600;
      letter-spacing: 1px;
      color: #000;
      width: 100%;
      word-break: break-all;
    }
}

.activity-card__subtitle-area{
  color: #666;
  margin-bottom: 0.5rem;
  padding: 0 10px;
  
  .creator{
    font-size: 14px;
    word-break: break-all;
  }
}

.flexible-height{
  flex-grow: 1;
}
View Compiled
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.