Как сделать отзывчивый space between

Question

есть блок слева картинка, а справа информация нужно сделать так чтобы название и дата были сверху а кнопка снизу возможно ли это сделать без указания фиксированной высоты? так как картинка может быть разных размеров

.company-news__recent {
  display: flex;
  align-items: center;
  gap: 160px;
  min-height: 380px;
  justify-content: space-between;
}
.recent-news__image {
  flex: 0 1 600px;
}
.recent-news__image img {
  max-width: 600px;
  width: 100%;
  height: auto;
}
.recent-news__info {
  flex: 0 1 580px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.recent-news__content {
  display: flex;
  flex-direction: column;
}
.recent-news__title {
  font-weight: 600;
  font-size: 20px;
  color: #1e1e1e;
  line-height: 24px;
  margin-bottom: 20px;
}
.recent-news__date {
  font-weight: 600;
  font-size: 17px;
  color: rgba(30, 30, 30, 0.7);
}
.recent-news__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0c3d9a;
  margin-top: 20px;
  padding: 9px 10px;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  min-width: 215px;
  min-height: 40px;
  align-self: flex-start;
}
.recent-news__button span {
  display: flex;
  align-items: center;
  padding-left: 10px;
}

<div class="company-news__recent recent-news">

               <div class="recent-news__image">
                  <img src="https://www.funnyart.club/uploads/posts/2022-12/1671175939_www-funnyart-club-p-krasivie-kvadratnie-kartinki-krasivo-5.jpg" alt="">
               </div>

               <div class="recent-news__info">
                  <div class="recent-news__content">
                     <div class="recent-news__title">ESG ОБЛИГАЦИИ ДЛЯ РЕКОНСТРУКЦИИ АЛМАТИНСКОЙ ТЭЦ-3</div>
                     <div class="recent-news__date">30 Ноябрь 2023</div>
                  </div>

                  <a href="" class="recent-news__button button">Читать подробнее
                     <span><img src="images/main/arrow_left-white.svg" alt=""></span>
                  </a>

               </div>

            </div>

Answer 1

Убрал height: 100%; для .recent-news__info и заменил align-items: center; на align-items: stretch;. Также закоментировал min-height: 380px;.

.company-news__recent {
  display: flex;
  align-items: stretch;
  gap: 160px;
  /* min-height: 380px; */
  justify-content: space-between;
}

.recent-news__image {
  flex: 0 1 600px;
}

.recent-news__image img {
  max-width: 600px;
  width: 100%;
  height: auto;
}

.recent-news__info {
  flex: 0 1 580px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.recent-news__content {
  display: flex;
  flex-direction: column;
}

.recent-news__title {
  font-weight: 600;
  font-size: 20px;
  color: #1e1e1e;
  line-height: 24px;
  margin-bottom: 20px;
}

.recent-news__date {
  font-weight: 600;
  font-size: 17px;
  color: rgba(30, 30, 30, 0.7);
}

.recent-news__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0c3d9a;
  margin-top: 20px;
  padding: 9px 10px;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  min-width: 215px;
  min-height: 40px;
  align-self: flex-start;
}

.recent-news__button span {
  display: flex;
  align-items: center;
  padding-left: 10px;
}

<div class="company-news__recent recent-news">

  <div class="recent-news__image">
    <img src="https://www.funnyart.club/uploads/posts/2022-12/1671175939_www-funnyart-club-p-krasivie-kvadratnie-kartinki-krasivo-5.jpg" alt="">
  </div>

  <div class="recent-news__info">
    <div class="recent-news__content">
      <div class="recent-news__title">ESG ОБЛИГАЦИИ ДЛЯ РЕКОНСТРУКЦИИ АЛМАТИНСКОЙ ТЭЦ-3</div>
      <div class="recent-news__date">30 Ноябрь 2023</div>
    </div>

    <a href="" class="recent-news__button button">
    Читать подробнее
    <span>
    <img src="images/main/arrow_left-white.svg" alt="">
    </span>
    </a>

  </div>

</div>

Answer 2

Задача решается легко с помощью css flex

.body {
  display: flex;
}

.right {
  margin-left: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<div class="body">
  <div class="left">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR7_JmRk0Basiip5J3lNhRzsfsRwx_BGcPswr2IVf6DDrBSMn5NWp6ss6SPJ4oh-9h3yxQ&usqp=CAU"/>
  </div>
  <div class="right">
    <div>
      text 1
    </div>
    <div>
      text 2
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как сделать отзывчивый space between

Ответы (2 шт):