Amber Scarlett Amber Scarlett - 5 months ago 10
CSS Question

how to align two divs having same height?

I want to align two

div
s (or something similar) next to each other with same
height
that help me to achieve this:

SS

furthermore I'm currently using some HTML code and some css effect for the image:



.hoverAm figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hoverAm figure:hover img {
opacity: .5;
}

<div>
<p>AUTUMN OUTFIT</p>
<p>Some other text</p>
</div>
<div class="hoverAm column" style="width:100%;height:100%;">
<div style="width:100%">
<figure>
<img src="http://lorempixel.com/400/200/sports/1/" alt="Charlie Henry Adventure" style="width:100%;height:100%;" />
</figure>
</div>
</div>




Answer

you can do that with flexbox

Note: avoid using inline styles.

body,
figure {
  margin: 0
}
.hoverAm {
  display: flex
}
figure,
.text {
  flex: 1;
  background: red
}
.hoverAm figure img {
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  width: 100%;
  display: block
}
.hoverAm figure:hover img {
  opacity: .5;
}
<div class="hoverAm column">
  <figure>
    <img src="//dummyimage.com/200x400" alt="Charlie Henry Adventure" />
  </figure>
  <div class="text">
    some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes
    here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some
    text goes here
  </div>
</div>