<div class="flex-container">
  <a class="a-logo" href="#">
    <img src='https://images.unsplash.com/photo-1605106250963-ffda6d2a4b32?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY0NzkyNzZ8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  </a>
    <a class="a-house" href="#">
    <img id="img-house" src='https://images.unsplash.com/photo-1587913560680-7f8187bf9634?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY0NzkzNzZ8&ixlib=rb-4.0.3&q=85' alt=''>
    </a>
</div>
    
.flex-container {
  display: flex;
  justify-content: space-around;  /* or center or space-between  */
  gap: 10px;   /* choose value  */
}
a {
  height: 150px;
}
.a-logo {
  flex: 0 0 150px;   /* fixed width */
}
.a-house {
  flex: 0 1 450px;   /* with flex-grow set to zero, max image width will be 450px  */
}
img {
  width: 100%;
}
#img-house {
  height: 150px;
  object-fit: cover;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.