How do I make two divs have the same height no matter the content

What I am trying to edit

Originally I had the min-width and a max-width of both of them to be the same but when I changed the image in the left one, there was an overflow so I took out the max-width property. I also tried using the flex-grow property but it didn’t work. Is there any other way I can achieve what I want?

#section_body_6.main.container {
  padding-top: 6vw;
  /* padding-right: 3vw; */
  padding-bottom: 6vw;
  /* padding-left: 3vw; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: linear-gradient(rgba(43, 48, 71, 0.4), rgba(43, 48, 71, 0.4)), url("/pix_builder/elements/images/makeup/1.png") fixed no-repeat center;
  background-size: cover;
}

#section_body_6.main .inner {
  height: 100%;
}

#section_body_6.main .inner .widget {
  padding: 1vw;
}

#section_body_6.main .width {
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

#section_body_6.main .inner.image {
  padding: 1vw;
  background-color: #fff;
  width: 45%;
  flex: 1 1 auto;
  text-align: center;
  min-height: 600px;
}

#section_body_6.main .inner.image .logo {
  width: 100%;
  max-width: 150px
}

#section_body_6.main .inner.image .main {
  width: 100%;
  max-width: 300px;
}

#section_body_6.main .inner.text {
  display: flex;
  flex-direction: column;
  background-color: #f7a885;
  padding-top: 2vw;
  padding-right: 3vw;
  padding-left: 3vw;
  width: 55%;
  flex: 1 1 auto;
  min-height: 600px;
  max-height: 600px;
}

#section_body_6.main .inner.text h1 {
  font-size: 56px;
  color: #fff;
  font-family: 'Karla', sans-serif;
}

#section_body_6.main .inner.text p {
  font-size: 20px;
  font-family: 'Karla', sans-serif;
  color: #fff;
}

#section_body_6.main .inner.text .signup {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

#section_body_6.main .inner.text .signup .sign {
  width: 100%;
  max-width: 200px;
}

#section_body_6.main .inner.text .signup .form {
  width: 70%;
}

#section_body_6.main .inner.text .signup form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

#section_body_6.main .inner.text .signup input {
  padding: 0px 10px;
  color: #020020;
  border: 1px solid #ffffff;
  display: block;
  width: 100%;
  height: 40px;
  line-height: inherit;
  border-radius: 3px;
  font-family: "Karla", sans-serif;
  margin: 1vw;
}

#section_body_6.main .inner.text .signup button {
  background: #2b3047;
  color: #ffffff;
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  transition: color 0.2s linear, background 0.2s linear, border-color 0.2s linear, text-shadow 0.2s linear;
  text-decoration: none;
  position: relative;
  width: 100%;
  font-weight: bold;
  min-height: 48px;
  min-width: 96px;
  padding: 14px 24px;
  font-family: "Karla", sans-serif;
  border: none;
}
<section id="section_body_6" class="main container">
  <div class="width">
    <div class="inner image">
      <div class="widget">
        <img class="logo" src="https://lh3.googleusercontent.com/uO-2GwlFxWnex3obmZmPi4xmZgdXofKigjih4aH_tmKswH-x56GfWFTB82Yquc6fJhWmNVwoCSDSjgH705-XWnQ=s0" data-image-upload-source="builder3" alt="" style="width:100%;max-width:150px">
      </div>
      <div class="widget">
        <img class="main" src="/pix_builder/elements/images/makeup/5.png" data-src="/pix_builder/elements/images/makeup/5.png" alt="" style="width:100%">
      </div>
    </div>
    <div class="inner text">
      <div class="widget">
        <h1>Look and Feel Perfect Every Day.</h1>
      </div>
      <div class="widget">
        <p>
          Subscribe to my newsletter to get my FREE Every Day Makeup Look guide, PLUS top secret tips and tricks used by the industry’s leading makeup artists.
        </p>
      </div>
      <div class="signup">
        <div class="widget">
          <img class="lp-image-react w-8cdb4d98-8e02-3986-a823-950a991fde05 css-1cg3cc6 sign" src="https://lh3.googleusercontent.com/dmY1Sjs5FSKW-wkI-McMrvHbxsIIzeKI38qUb20rnpXb_llEPPoCudG3xhzuYB12sCn8DpRM_GnUUjCMjsDMiw=s0" data-image-upload-source="builder3" alt=""
            style="width:100%;max-width:200px">
        </div>
        <div class="widget form">
          <form action="#" method="get" target="_top">
            <input type="email" id="email" placeholder="Email">
            <button type="submit" onclick="popup()">Sign-Up</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

So what i found, u have class #section_body_6.main .inner.image .main in which u provide max-width: 300px; but height changed automaticaly, solution:

#section_body_6.main.container{
    padding-top: 6vw;
    /* padding-right: 3vw; */
    padding-bottom: 6vw;
    /* padding-left: 3vw; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: linear-gradient(rgba(43, 48, 71, 0.4), rgba(43, 48, 71, 0.4)), url("/pix_builder/elements/images/makeup/1.png") fixed no-repeat center;
    background-size: cover;
}
#section_body_6.main .inner{
    height: 100%;
}
#section_body_6.main .inner .widget{
    padding: 1vw;
}
#section_body_6.main .width{
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
#section_body_6.main .inner.image{
    padding: 1vw;
    background-color: #fff;
    width: 45%;
    flex: 1 1 auto;
    text-align: center;
    min-height: 600px;
}
#section_body_6.main .inner.image .logo{
    width: 100%;
    max-width: 150px
}
#section_body_6.main .inner.image .main{
    width: 100%;
    max-width: 300px;
    max-height: 390px;
}
#section_body_6.main .inner.text{
    display: flex;
    flex-direction: column;
    background-color: #f7a885;
    padding-top: 2vw;
    padding-right: 3vw;
    padding-left: 3vw;
    width: 55%;
    flex: 1 1 auto;
    min-height: 600px;
}
<section id="section_body_6" class="main container">
  <div class="width">
    <div class="inner image">
      <div class="widget">
        <img class="logo" src="https://lh3.googleusercontent.com/uO-2GwlFxWnex3obmZmPi4xmZgdXofKigjih4aH_tmKswH-x56GfWFTB82Yquc6fJhWmNVwoCSDSjgH705-XWnQ=s0" data-image-upload-source="builder3" alt="" style="width:100%;max-width:150px">
      </div>
      <div class="widget">
        <img class="main" src="https://www.fabmood.com/inspiration/wp-content/uploads/2020/11/eye-makeup-looks.jpg" data-src="/pix_builder/elements/images/makeup/5.png" alt="" style="width:100%">
      </div>
    </div>
    <div class="inner text">
      <div class="widget">
        <h1>Look and Feel Perfect Every Day.</h1>
      </div>
      <div class="widget">
        <p>
          Subscribe to my newsletter to get my FREE Every Day Makeup Look guide, PLUS top secret tips and tricks used by the industry’s leading makeup artists.
        </p>
      </div>
      <div class="signup">
        <div class="widget">
          <img class="lp-image-react w-8cdb4d98-8e02-3986-a823-950a991fde05 css-1cg3cc6 sign" src="https://lh3.googleusercontent.com/dmY1Sjs5FSKW-wkI-McMrvHbxsIIzeKI38qUb20rnpXb_llEPPoCudG3xhzuYB12sCn8DpRM_GnUUjCMjsDMiw=s0" data-image-upload-source="builder3" alt="" style="width:100%;max-width:200px">
        </div>
        <div class="widget form">
          <form action="#" method="get" target="_top">
            <input type="email" id="email" placeholder="Email">
            <button type="submit" onclick="popup()">Sign-Up</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Method 2

one method of doing this is adding display: flex to their parent


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x