0

I'm trying to find out if it's possible to make the image on the left column have the same height as the content on the right? The problem that I'm facing right now is that I want to have responsive popup which height should depend mainly on the right content and the image on the left should have the same height as the content. What am I missing?

<div class="grid grid-cols-1 items-center bg-purewhite rounded-xl shadow authentication-popup lg:grid-cols-auth-popup lg:max-w-[55rem] lg:w-max svelte-q5aaad opened" style="grid-template-rows: auto !important;">
   <div class="w-full h-full relative shrink-0 lg:rounded-l-xl lg:w-fit"> 
      <img class="w-full h-[200px] object-authentication object-cover rounded-t-xl lg:w-[380px] lg:h-full lg:rounded-l-xl lg:rounded-tr-none" style="/*! height: 100% !important; */" src="https://plus.unsplash.com/premium_photo-1677942035529-db39d2a25915?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=928&amp;q=80">
   </div>
   <div class="flex flex-col grow p-6">
      <div class="flex items-center gap-1.5 justify-between">
         <p class="text-primary font-bold text-3xl lg:whitespace-nowrap">Please Sign In</p>
         <i class="close-pm-delete-confirm-popup fa-solid fa-xmark fa-xl text-secondary cursor-pointer"></i>
      </div>
   </div>
</div>

enter image description here

rediz
  • 53
  • 5

1 Answers1

1

Best solution is to use flexbox.

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}

.wrapper>.left {
  background: #fcc;
}

.wrapper>.right {
  background: #ccf;
  flex: 1;
}

Refer: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

If no fixed height

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>


.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}
Arpitha M
  • 11
  • 3